Compare commits
3 Commits
25060702-s
...
26011301-r
| Author | SHA1 | Date | |
|---|---|---|---|
| 64ba3b5767 | |||
| c99b73d406 | |||
| 25c0abd666 |
@@ -29,16 +29,16 @@
|
|||||||
<!-- <artifactId>spring-ai-openai-spring-boot-starter</artifactId>-->
|
<!-- <artifactId>spring-ai-openai-spring-boot-starter</artifactId>-->
|
||||||
<!-- </dependency>-->
|
<!-- </dependency>-->
|
||||||
|
|
||||||
<!-- <dependency>-->
|
<dependency>
|
||||||
<!-- <groupId>org.springframework.ai</groupId>-->
|
<groupId>org.springframework.ai</groupId>
|
||||||
<!-- <artifactId>spring-ai-tika-document-reader</artifactId>-->
|
<artifactId>spring-ai-tika-document-reader</artifactId>
|
||||||
<!-- </dependency>-->
|
</dependency>
|
||||||
|
|
||||||
<!-- <!– 处理知识库:向量库 –>-->
|
<!-- 处理知识库:向量库 -->
|
||||||
<!-- <dependency>-->
|
<dependency>
|
||||||
<!-- <groupId>org.springframework.ai</groupId>-->
|
<groupId>org.springframework.ai</groupId>
|
||||||
<!-- <artifactId>spring-ai-pgvector-store-spring-boot-starter</artifactId>-->
|
<artifactId>spring-ai-pgvector-store-spring-boot-starter</artifactId>
|
||||||
<!-- </dependency>-->
|
</dependency>
|
||||||
|
|
||||||
<!-- 使用ollama的api -->
|
<!-- 使用ollama的api -->
|
||||||
<dependency>
|
<dependency>
|
||||||
|
|||||||
@@ -1,10 +1,16 @@
|
|||||||
package com.storm.dev.config;
|
package com.storm.dev.config;
|
||||||
|
|
||||||
import org.springframework.ai.ollama.OllamaChatClient;
|
import org.springframework.ai.ollama.OllamaChatClient;
|
||||||
|
import org.springframework.ai.ollama.OllamaEmbeddingClient;
|
||||||
import org.springframework.ai.ollama.api.OllamaApi;
|
import org.springframework.ai.ollama.api.OllamaApi;
|
||||||
|
import org.springframework.ai.ollama.api.OllamaOptions;
|
||||||
|
import org.springframework.ai.transformer.splitter.TokenTextSplitter;
|
||||||
|
import org.springframework.ai.vectorstore.PgVectorStore;
|
||||||
|
import org.springframework.ai.vectorstore.SimpleVectorStore;
|
||||||
import org.springframework.beans.factory.annotation.Value;
|
import org.springframework.beans.factory.annotation.Value;
|
||||||
import org.springframework.context.annotation.Bean;
|
import org.springframework.context.annotation.Bean;
|
||||||
import org.springframework.context.annotation.Configuration;
|
import org.springframework.context.annotation.Configuration;
|
||||||
|
import org.springframework.jdbc.core.JdbcTemplate;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 注入OllamaApi、OllamaChatClient对象
|
* 注入OllamaApi、OllamaChatClient对象
|
||||||
@@ -24,4 +30,24 @@ public class OllamaConfig {
|
|||||||
return new OllamaChatClient(ollamaApi);
|
return new OllamaChatClient(ollamaApi);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Bean
|
||||||
|
public TokenTextSplitter tokenTextSplitter() {
|
||||||
|
return new TokenTextSplitter();
|
||||||
|
}
|
||||||
|
|
||||||
|
@Bean
|
||||||
|
public SimpleVectorStore simpleVectorStore(OllamaApi ollamaApi) {
|
||||||
|
OllamaEmbeddingClient embeddingClient = new OllamaEmbeddingClient(ollamaApi);
|
||||||
|
embeddingClient.withDefaultOptions(OllamaOptions.create().withModel("nomic-embed-text"));
|
||||||
|
return new SimpleVectorStore(embeddingClient);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Bean
|
||||||
|
public PgVectorStore pgVectorStore(OllamaApi ollamaApi, JdbcTemplate jdbcTemplate) {
|
||||||
|
OllamaEmbeddingClient embeddingClient = new OllamaEmbeddingClient(ollamaApi);
|
||||||
|
embeddingClient.withDefaultOptions(OllamaOptions.create().withModel("nomic-embed-text"));
|
||||||
|
return new PgVectorStore(jdbcTemplate, embeddingClient);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -2,16 +2,25 @@ server:
|
|||||||
port: 8090
|
port: 8090
|
||||||
|
|
||||||
spring:
|
spring:
|
||||||
|
datasource:
|
||||||
|
driver-class-name: org.postgresql.Driver
|
||||||
|
username: postgres
|
||||||
|
password: postgres
|
||||||
|
url: jdbc:postgresql://192.168.109.134:15432/ai-rag-knowledge
|
||||||
|
type: com.zaxxer.hikari.HikariDataSource
|
||||||
ai:
|
ai:
|
||||||
ollama:
|
ollama:
|
||||||
base-url: http://117.72.202.142:11434
|
base-url: http://192.168.109.134:11434
|
||||||
|
embedding:
|
||||||
|
options:
|
||||||
|
num-batch: 512
|
||||||
|
model: nomic-embed-text
|
||||||
# Redis
|
# Redis
|
||||||
redis:
|
redis:
|
||||||
sdk:
|
sdk:
|
||||||
config:
|
config:
|
||||||
host: 117.72.202.142
|
host: 127.0.0.1
|
||||||
port: 16379
|
port: 6379
|
||||||
pool-size: 10
|
pool-size: 10
|
||||||
min-idle-size: 5
|
min-idle-size: 5
|
||||||
idle-timeout: 30000
|
idle-timeout: 30000
|
||||||
|
|||||||
90
ai-rag-app/src/test/java/com/storm/dev/text/RAGApiTest.java
Normal file
90
ai-rag-app/src/test/java/com/storm/dev/text/RAGApiTest.java
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
package com.storm.dev.text;
|
||||||
|
|
||||||
|
import com.alibaba.fastjson.JSON;
|
||||||
|
import jakarta.annotation.Resource;
|
||||||
|
import lombok.extern.slf4j.Slf4j;
|
||||||
|
import org.junit.Test;
|
||||||
|
import org.junit.runner.RunWith;
|
||||||
|
import org.springframework.ai.chat.ChatResponse;
|
||||||
|
import org.springframework.ai.chat.messages.Message;
|
||||||
|
import org.springframework.ai.chat.messages.UserMessage;
|
||||||
|
import org.springframework.ai.chat.prompt.Prompt;
|
||||||
|
import org.springframework.ai.chat.prompt.SystemPromptTemplate;
|
||||||
|
import org.springframework.ai.document.Document;
|
||||||
|
import org.springframework.ai.ollama.OllamaChatClient;
|
||||||
|
import org.springframework.ai.ollama.api.OllamaApi;
|
||||||
|
import org.springframework.ai.ollama.api.OllamaOptions;
|
||||||
|
import org.springframework.ai.reader.tika.TikaDocumentReader;
|
||||||
|
import org.springframework.ai.transformer.splitter.TokenTextSplitter;
|
||||||
|
import org.springframework.ai.vectorstore.PgVectorStore;
|
||||||
|
import org.springframework.ai.vectorstore.SearchRequest;
|
||||||
|
import org.springframework.ai.vectorstore.SimpleVectorStore;
|
||||||
|
import org.springframework.boot.test.context.SpringBootTest;
|
||||||
|
import org.springframework.test.context.junit4.SpringRunner;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @author: lyd
|
||||||
|
* @date: 2026/1/14 21:47
|
||||||
|
*/
|
||||||
|
@Slf4j
|
||||||
|
@RunWith(SpringRunner.class)
|
||||||
|
@SpringBootTest
|
||||||
|
public class RAGApiTest {
|
||||||
|
@Resource
|
||||||
|
private OllamaChatClient ollamaChatClient;
|
||||||
|
@Resource
|
||||||
|
private TokenTextSplitter tokenTextSplitter;
|
||||||
|
@Resource
|
||||||
|
private SimpleVectorStore simpleVectorStore;
|
||||||
|
@Resource
|
||||||
|
private PgVectorStore pgVectorStore;
|
||||||
|
|
||||||
|
@Test
|
||||||
|
public void upload() {
|
||||||
|
// 上传
|
||||||
|
TikaDocumentReader reader = new TikaDocumentReader("./data/file.text");
|
||||||
|
List<Document> documents = reader.get();
|
||||||
|
List<Document> documentSplitterList = tokenTextSplitter.apply(documents);
|
||||||
|
// 打标
|
||||||
|
documents.forEach(document -> document.getMetadata().put("knowledge", "德德"));
|
||||||
|
documentSplitterList.forEach(document -> document.getMetadata().put("knowledge", "德德"));
|
||||||
|
|
||||||
|
pgVectorStore.accept(documentSplitterList);
|
||||||
|
log.info("上传完成!");
|
||||||
|
}
|
||||||
|
|
||||||
|
@Test
|
||||||
|
public void chat() {
|
||||||
|
// 构建提问
|
||||||
|
String message = "李永德,哪年出生的";
|
||||||
|
|
||||||
|
// 构建推理模板
|
||||||
|
String SYSTEM_PROMPT = """
|
||||||
|
Use the information from the DOCUMENTS section to provide accurate answers but act as if you knew this information innately.
|
||||||
|
If unsure, simply state that you don't know.
|
||||||
|
Another thing you need to note is that your reply must be in Chinese!
|
||||||
|
DOCUMENTS:
|
||||||
|
{documents}
|
||||||
|
""";
|
||||||
|
// 读取向量库信息
|
||||||
|
SearchRequest request = SearchRequest.query(message).withTopK(5).withFilterExpression("knowledge == '德德'");
|
||||||
|
// 相似性搜索
|
||||||
|
List<Document> documents = pgVectorStore.similaritySearch(request);
|
||||||
|
String documentsCollectors = documents.stream().map(Document::getContent).collect(Collectors.joining());
|
||||||
|
|
||||||
|
// 推理:RAG
|
||||||
|
Message ragMessage = new SystemPromptTemplate(SYSTEM_PROMPT).createMessage(Map.of("documents", documentsCollectors));
|
||||||
|
ArrayList<Message> messages = new ArrayList<>();
|
||||||
|
messages.add(new UserMessage(message));
|
||||||
|
messages.add(ragMessage);
|
||||||
|
|
||||||
|
// 提问
|
||||||
|
ChatResponse chatResponse = ollamaChatClient.call(new Prompt(messages, OllamaOptions.create().withModel("deepseek-r1:7b")));
|
||||||
|
log.info("测试结果:{}", JSON.toJSONString(chatResponse));
|
||||||
|
}
|
||||||
|
}
|
||||||
1
ai-rag-app/src/test/resources/data/file.text
Normal file
1
ai-rag-app/src/test/resources/data/file.text
Normal file
@@ -0,0 +1 @@
|
|||||||
|
李永德,1999年12月31日出生,福建泉州人。
|
||||||
@@ -22,7 +22,7 @@ public class OllamaController implements IAiService {
|
|||||||
private OllamaChatClient chatClient;
|
private OllamaChatClient chatClient;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* http://localhost:8090/api/v1/ollama/generate?model=deepseek-r1:1.5b&message=1+1
|
* http://localhost:8090/api/v1/ollama/generate?model=deepseek-r1:7b&message=1+1
|
||||||
*/
|
*/
|
||||||
@GetMapping("generate")
|
@GetMapping("generate")
|
||||||
@Override
|
@Override
|
||||||
@@ -31,7 +31,7 @@ public class OllamaController implements IAiService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=hi
|
* http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:7b&message=hi
|
||||||
*/
|
*/
|
||||||
@GetMapping("generate_stream")
|
@GetMapping("generate_stream")
|
||||||
@Override
|
@Override
|
||||||
|
|||||||
43
docs/docker-compose-environment-aliyun2.yml
Normal file
43
docs/docker-compose-environment-aliyun2.yml
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# docker-compose -f docker-compose-environment-aliyun.yml up -d
|
||||||
|
version: '3'
|
||||||
|
services:
|
||||||
|
# 对话模型
|
||||||
|
# ollama pull deepseek-r1:1.5b
|
||||||
|
# 运行模型
|
||||||
|
# ollama run deepseek-r1:1.5b
|
||||||
|
# 联网模型
|
||||||
|
# ollama pull nomic-embed-text
|
||||||
|
ollama:
|
||||||
|
image: registry.cn-hangzhou.aliyuncs.com/xfg-studio/ollama:0.5.10
|
||||||
|
container_name: ollama
|
||||||
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- "11434:11434"
|
||||||
|
vector_db:
|
||||||
|
image: registry.cn-hangzhou.aliyuncs.com/xfg-studio/pgvector:v0.5.0
|
||||||
|
container_name: vector_db
|
||||||
|
restart: always
|
||||||
|
environment:
|
||||||
|
- POSTGRES_USER=postgres
|
||||||
|
- POSTGRES_PASSWORD=postgres
|
||||||
|
- POSTGRES_DB=ai-rag-knowledge
|
||||||
|
- PGPASSWORD=postgres
|
||||||
|
volumes:
|
||||||
|
- ./pgvector/sql/init.sql:/docker-entrypoint-initdb.d/init.sql
|
||||||
|
logging:
|
||||||
|
options:
|
||||||
|
max-size: 10m
|
||||||
|
max-file: "3"
|
||||||
|
ports:
|
||||||
|
- '15432:5432'
|
||||||
|
healthcheck:
|
||||||
|
test: "pg_isready -U postgres -d ai-rag-knowledge"
|
||||||
|
interval: 2s
|
||||||
|
timeout: 20s
|
||||||
|
retries: 10
|
||||||
|
networks:
|
||||||
|
- my-network
|
||||||
|
|
||||||
|
networks:
|
||||||
|
my-network:
|
||||||
|
driver: bridge
|
||||||
121
docs/nginx/html/ai-case-04.html
Normal file
121
docs/nginx/html/ai-case-04.html
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AI Chat</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100 h-screen">
|
||||||
|
<div class="container mx-auto max-w-3xl h-screen flex flex-col">
|
||||||
|
<!-- 消息容器 -->
|
||||||
|
<div id="messageContainer" class="flex-1 overflow-y-auto p-4 space-y-4 bg-white rounded-lg shadow-lg">
|
||||||
|
<!-- 消息历史将在此动态生成 -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 输入区域 -->
|
||||||
|
<div class="p-4 bg-white rounded-lg shadow-lg mt-4">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="messageInput"
|
||||||
|
placeholder="输入消息..."
|
||||||
|
class="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
onkeypress="handleKeyPress(event)"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onclick="sendMessage()"
|
||||||
|
class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
||||||
|
>
|
||||||
|
发送
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 添加消息到容器
|
||||||
|
function addMessage(content, isUser = false) {
|
||||||
|
const container = document.getElementById('messageContainer');
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
|
||||||
|
messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
<div class="max-w-[80%] p-3 rounded-lg ${
|
||||||
|
isUser ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'
|
||||||
|
}">
|
||||||
|
${content}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
container.appendChild(messageDiv);
|
||||||
|
container.scrollTop = container.scrollHeight; // 滚动到底部
|
||||||
|
}
|
||||||
|
|
||||||
|
// 发送消息
|
||||||
|
async function sendMessage() {
|
||||||
|
const input = document.getElementById('messageInput');
|
||||||
|
const message = input.value.trim();
|
||||||
|
|
||||||
|
if (!message) return;
|
||||||
|
|
||||||
|
// 清空输入框
|
||||||
|
input.value = '';
|
||||||
|
|
||||||
|
// 添加用户消息
|
||||||
|
addMessage(message, true);
|
||||||
|
|
||||||
|
// 添加初始AI消息占位
|
||||||
|
addMessage('<span class="animate-pulse">▍</span>');
|
||||||
|
|
||||||
|
// 构建API URL
|
||||||
|
const apiUrl = `http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:7b&message=${encodeURIComponent(message)}`;
|
||||||
|
|
||||||
|
// 使用EventSource接收流式响应
|
||||||
|
const eventSource = new EventSource(apiUrl);
|
||||||
|
let buffer = '';
|
||||||
|
|
||||||
|
eventSource.onmessage = (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
const content = data.result?.output?.content || '';
|
||||||
|
const finishReason = data.result?.metadata?.finishReason;
|
||||||
|
|
||||||
|
if (content) {
|
||||||
|
buffer += content;
|
||||||
|
updateLastMessage(buffer + '<span class="animate-pulse">▍</span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (finishReason === 'STOP') {
|
||||||
|
eventSource.close();
|
||||||
|
updateLastMessage(buffer); // 移除加载动画
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('解析错误:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
eventSource.onerror = (error) => {
|
||||||
|
console.error('EventSource错误:', error);
|
||||||
|
eventSource.close();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新最后一条消息
|
||||||
|
function updateLastMessage(content) {
|
||||||
|
const container = document.getElementById('messageContainer');
|
||||||
|
const lastMessage = container.lastChild.querySelector('div');
|
||||||
|
lastMessage.innerHTML = content;
|
||||||
|
container.scrollTop = container.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 回车发送
|
||||||
|
function handleKeyPress(event) {
|
||||||
|
if (event.key === 'Enter' && !event.shiftKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
sendMessage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
190
docs/nginx/html/index.html
Normal file
190
docs/nginx/html/index.html
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AI Chat</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
/* Custom scrollbar for chat container */
|
||||||
|
.chat-container::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.chat-container::-webkit-scrollbar-track {
|
||||||
|
background: #f3f4f6;
|
||||||
|
}
|
||||||
|
.chat-container::-webkit-scrollbar-thumb {
|
||||||
|
background: #d1d5db;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.chat-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #9ca3af;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100 min-h-screen flex flex-col">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-3xl font-bold text-gray-800">AI Chat</h1>
|
||||||
|
<p class="text-gray-600 mt-2">Simple AI conversation powered by Ollama</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chat Container -->
|
||||||
|
<div id="chatContainer" class="chat-container bg-white rounded-lg shadow-lg h-96 overflow-y-auto mb-4 p-4 space-y-4 flex flex-col">
|
||||||
|
<!-- Messages will be appended here -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Input Form -->
|
||||||
|
<form id="messageForm" class="flex space-x-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="messageInput"
|
||||||
|
placeholder="Type your message..."
|
||||||
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
id="sendButton"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE = 'http://localhost:8090/api/v1/ollama/generate_stream';
|
||||||
|
const MODEL = 'deepseek-r1:7b';
|
||||||
|
const chatContainer = document.getElementById('chatContainer');
|
||||||
|
const messageInput = document.getElementById('messageInput');
|
||||||
|
const sendButton = document.getElementById('sendButton');
|
||||||
|
const messageForm = document.getElementById('messageForm');
|
||||||
|
|
||||||
|
let currentEventSource = null;
|
||||||
|
let currentAIMessageElement = null;
|
||||||
|
|
||||||
|
// Function to add user message to chat
|
||||||
|
function addUserMessage(message) {
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.className = 'flex justify-end mb-4';
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
<div class="max-w-xs lg:max-w-md px-4 py-2 bg-blue-500 text-white rounded-lg rounded-tr-sm">
|
||||||
|
${escapeHtml(message)}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
chatContainer.appendChild(messageDiv);
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to add AI message container
|
||||||
|
function addAIMessageContainer() {
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.className = 'flex justify-start mb-4';
|
||||||
|
messageDiv.id = 'aiMessage';
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
<div class="max-w-xs lg:max-w-md px-4 py-2 bg-gray-200 text-gray-800 rounded-lg rounded-tl-sm">
|
||||||
|
<span id="aiContent"></span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
chatContainer.appendChild(messageDiv);
|
||||||
|
currentAIMessageElement = document.getElementById('aiContent');
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to append text to AI message
|
||||||
|
function appendToAIMessage(text) {
|
||||||
|
if (currentAIMessageElement && text) {
|
||||||
|
currentAIMessageElement.textContent += text;
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to escape HTML
|
||||||
|
function escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to close EventSource
|
||||||
|
function closeEventSource() {
|
||||||
|
if (currentEventSource) {
|
||||||
|
currentEventSource.close();
|
||||||
|
currentEventSource = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form submit handler
|
||||||
|
messageForm.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const message = messageInput.value.trim();
|
||||||
|
if (!message || currentEventSource) return; // Prevent multiple requests
|
||||||
|
|
||||||
|
// Add user message
|
||||||
|
addUserMessage(message);
|
||||||
|
|
||||||
|
// Clear input
|
||||||
|
messageInput.value = '';
|
||||||
|
|
||||||
|
// Disable send button
|
||||||
|
sendButton.disabled = true;
|
||||||
|
sendButton.textContent = 'Sending...';
|
||||||
|
|
||||||
|
// Add AI message container
|
||||||
|
addAIMessageContainer();
|
||||||
|
|
||||||
|
// Prepare API URL
|
||||||
|
const encodedMessage = encodeURIComponent(message);
|
||||||
|
const apiUrl = `${API_BASE}?model=${MODEL}&message=${encodedMessage}`;
|
||||||
|
|
||||||
|
// Create EventSource for streaming
|
||||||
|
currentEventSource = new EventSource(apiUrl);
|
||||||
|
|
||||||
|
currentEventSource.onmessage = (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
if (data && data.result) {
|
||||||
|
const content = data.result.output?.content || '';
|
||||||
|
const finishReason = data.result.metadata?.finishReason;
|
||||||
|
|
||||||
|
// Append content if not empty
|
||||||
|
if (content) {
|
||||||
|
appendToAIMessage(content);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for end of stream
|
||||||
|
if (finishReason === 'STOP') {
|
||||||
|
closeEventSource();
|
||||||
|
sendButton.disabled = false;
|
||||||
|
sendButton.textContent = 'Send';
|
||||||
|
currentAIMessageElement = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing SSE data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
currentEventSource.onerror = (error) => {
|
||||||
|
console.error('EventSource failed:', error);
|
||||||
|
closeEventSource();
|
||||||
|
sendButton.disabled = false;
|
||||||
|
sendButton.textContent = 'Send';
|
||||||
|
console.log(currentAIMessageElement)
|
||||||
|
// if (currentAIMessageElement) {
|
||||||
|
// currentAIMessageElement.textContent += ' (Error: Connection failed)';
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle input focus to scroll to bottom
|
||||||
|
messageInput.addEventListener('focus', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user