Visão Geral do Projeto

Este projeto é um template de MVP para desenvolvimento de interfaces de chat com modelos de linguagem, construído com Vue 3, Vite 6, TypeScript, Naive UI, Pinia e UnoCSS. O sistema suporta integração com múltiplos provedores de IA através de APIs, oferecendo respostas independentes por pergunta, sem necessidade de contexto prévio.

Principais Funcionalidades

• Stack Tecnológica: Vite 6, Vue 3, TypeScript, Pinia v3, ESLint v9
• Interface: Naive UI 2.x com suporte a ícones via UnoCSS e Iconify
• Processamento de Respostas: Suporte a markdown, realce de sintaxe com highlight.js, renderização de fórmulas matemáticas e diagramas Mermaid
• Modo de Desenvolvimento: Modo simulado local para desenvolvimento sem API real
• Modelos Suportados: Deepseek, Spark, SiliconFlow, Moonshot, Ollama e modo simulado

Configuração do Ambiente

Pré-requisitos:

• Node.js ≥ 18.12.x
• PNPM 9.x
• Vue 3.x

Para iniciar o projeto:

pnpm install
pnpm dev

Configuração de Chaves de API

Crie um arquivo .env a partir do template e configure as chaves cnoforme necessário:

VITE_SPARK_KEY=seu_spark_key
VITE_SILICONFLOW_KEY=seu_siliconflow_key
VITE_MOONSHOT_KEY=seu_moonshot_key
VITE_DEEPSEEK_KEY=seu_deepseek_key

Estrutura de Proxy para Desenvolvimento

O projeto utiliza proxy no Vite para resolver problemas de CORS durante o desenvolvimento. Exemplo de configuração:

server: {
  proxy: {
    '/spark': {
      target: 'https://spark-api-open.xf-yun.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/spark/, '')
    }
  }
}

Gerenciamento de Modelos

O sistema utiliza um mecanismo de mapeamento para suportar diferentes modelos de IA. Cada modelo é definido com:

• Um identificador único
• Função de transformação para processar respostas em streaming
• Função de requisição específica para a API

Exemplo de Uso do Componente Principle

<MarkdownPreview
  ref="previewRef"
  v-model:content="outputContent"
  :model="selectedModel"
  :stream-transform-fn="transformFunction"
  @error="handleError"
  @complete="handleCompletion"
/>

Modelos Configurados