Spaces:
No application file
No application file
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chat with AI</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f0f2f5; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| padding: 2rem; | |
| width: 90%; | |
| max-width: 800px; | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| #question-form { | |
| display: flex; | |
| margin-bottom: 1.5rem; | |
| } | |
| #user-input { | |
| flex-grow: 1; | |
| padding: 0.75rem; | |
| font-size: 1rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px 0 0 4px; | |
| outline: none; | |
| transition: border-color 0.3s; | |
| } | |
| #user-input:focus { | |
| border-color: #4CAF50; | |
| } | |
| #submit-btn { | |
| padding: 0.75rem 1.5rem; | |
| font-size: 1rem; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 0 4px 4px 0; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| #submit-btn:hover { | |
| background-color: #45a049; | |
| } | |
| #submit-btn:disabled { | |
| background-color: #cccccc; | |
| cursor: not-allowed; | |
| } | |
| #response-area { | |
| background-color: #f9f9f9; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| padding: 1rem; | |
| min-height: 100px; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .loading { | |
| text-align: center; | |
| color: #666; | |
| } | |
| .response-content { | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .error { | |
| color: #d32f2f; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Chat with AI</h1> | |
| <form id="question-form"> | |
| <input type="text" id="user-input" placeholder="请输入您的问题" required> | |
| <button type="submit" id="submit-btn">提交</button> | |
| </form> | |
| <div id="response-area"> | |
| <p class="response-content">响应将显示在这里...</p> | |
| </div> | |
| </div> | |
| <script> | |
| const API_KEYS = { | |
| "deepseek": "sk-ighvkxrzaajsbshwyndcytoaeesupsgbtkzisameodq", | |
| "qwen": "sk-ighvkxrzaawyndcytoaeessgbtkzisameodqympgn bbbb", | |
| "2": "sk-RcmTwpmXe4k7SENS730aC80e061a481b8cD3C7290bDc26D2" | |
| }; | |
| const BASE_URLS = { | |
| "deepseek": "https://api.siliconflow.cn", | |
| "qwen": "https://api.siliconflow.cn", | |
| "2": "https://api.freegpt.art" | |
| }; | |
| const MODELS = { | |
| "deepseek": "deepseek-ai/DeepSeek-Coder-V2-Instruct", | |
| "qwen_math": "gpt-4-turbo", | |
| "2": "gpt-4-turbo", | |
| "3": "claude-3-5-sonnet-20240620", | |
| "4": "gpt-4o", | |
| "w": "claude-3-haiku-20240307" | |
| }; | |
| async function sendChatRequest(userMessage, apiKey, model, baseUrl) { | |
| const url = `${baseUrl}/v1/chat/completions`; | |
| const headers = { | |
| "accept": "application/json", | |
| "content-type": "application/json", | |
| "Authorization": `Bearer ${apiKey}` | |
| }; | |
| const payload = { | |
| "model": model, | |
| "messages": [ | |
| { | |
| "role": "user", | |
| "content": userMessage | |
| } | |
| ], | |
| "stream": true, | |
| "max_tokens": 4012, | |
| "temperature": 0.6, | |
| "top_p": 0.7, | |
| "top_k": 50, | |
| "frequency_penalty": 0, | |
| "n": 1 | |
| }; | |
| try { | |
| const response = await fetch(url, { | |
| method: 'POST', | |
| headers: headers, | |
| body: JSON.stringify(payload) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| return response.body.getReader(); | |
| } catch (error) { | |
| console.error("Request error:", error); | |
| return null; | |
| } | |
| } | |
| async function processUserInput(userInput, onChunk) { | |
| const classificationPrompt = `接下来我想请你充当问题的分类器，我会向你发送问题，如果你认为这个问题属于以下任何一类，请直接输出后面的对应标记，不要多加描述，如果不属于任何一类，请直接解这个问题，不要多加描述 | |
| 推理及常识或日常级数学问题：【｛4t｝】 | |
| 一般数学问题：【｛q2math｝】 | |
| 代码问题：【｛c3.5s｝】 | |
| 写作：【｛c3o｝】。 | |
| 问题：（${userInput}），请分类`; | |
| const deepseekReader = await sendChatRequest(classificationPrompt, API_KEYS["2"], MODELS.deepseek, BASE_URLS["2"]); | |
| if (deepseekReader) { | |
| const decoder = new TextDecoder(); | |
| let buffer = ''; | |
| let classification = ''; | |
| while (true) { | |
| const { done, value } = await deepseekReader.read(); | |
| if (done) break; | |
| buffer += decoder.decode(value, { stream: true }); | |
| const lines = buffer.split('\n'); | |
| buffer = lines.pop(); | |
| for (const line of lines) { | |
| if (line.startsWith('data: ')) { | |
| const data = line.slice(6); | |
| if (data === '[DONE]') break; | |
| try { | |
| const parsed = JSON.parse(data); | |
| const chunk = parsed.choices[0].delta.content; | |
| if (chunk) { | |
| classification += chunk; | |
| } | |
| } catch (error) { | |
| console.error('Error parsing streaming response:', error); | |
| } | |
| } | |
| } | |
| } | |
| console.log("DeepSeek Classification:", classification); | |
| let reader; | |
| switch (classification.trim()) { | |
| case "【｛q2math｝】": | |
| reader = await sendChatRequest(userInput, API_KEYS["2"], MODELS.qwen_math, BASE_URLS["2"]); | |
| break; | |
| case "【｛4t｝】": | |
| reader = await sendChatRequest("请一步步来，先思考再给结论：" + userInput, API_KEYS["2"], MODELS["2"], BASE_URLS["2"]); | |
| break; | |
| case "【｛c3.5s｝】": | |
| reader = await sendChatRequest(userInput, API_KEYS["2"], MODELS["3"], BASE_URLS["2"]); | |
| break; | |
| case "【｛c3o｝】": | |
| reader = await sendChatRequest(userInput, API_KEYS["2"], MODELS.w, BASE_URLS["2"]); | |
| break; | |
| default: | |
| reader = await sendChatRequest(userInput, API_KEYS["2"], MODELS["4"], BASE_URLS["2"]); | |
| } | |
| if (reader) { | |
| const decoder = new TextDecoder(); | |
| let buffer = ''; | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) break; | |
| buffer += decoder.decode(value, { stream: true }); | |
| const lines = buffer.split('\n'); | |
| buffer = lines.pop(); | |
| for (const line of lines) { | |
| if (line.startsWith('data: ')) { | |
| const data = line.slice(6); | |
| if (data === '[DONE]') { | |
| return; | |
| } | |
| try { | |
| const parsed = JSON.parse(data); | |
| const chunk = parsed.choices[0].delta.content; | |
| if (chunk) { | |
| onChunk(chunk); | |
| } | |
| } catch (error) { | |
| console.error('Error parsing streaming response:', error); | |
| } | |
| } | |
| } | |
| } | |
| } else { | |
| onChunk("抱歉，无法获取响应。"); | |
| } | |
| } else { | |
| onChunk("无法从 DeepSeek-V2-Chat 获取分类。"); | |
| } | |
| } | |
| document.getElementById('question-form').addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const userInput = document.getElementById('user-input').value; | |
| const responseArea = document.getElementById('response-area'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| responseArea.innerHTML = '<p class="response-content"><strong>响应：</strong><br></p>'; | |
| submitBtn.disabled = true; | |
| try { | |
| await processUserInput(userInput, (chunk) => { | |
| const responseContent = responseArea.querySelector('.response-content'); | |
| responseContent.innerHTML += chunk; | |
| responseArea.scrollTop = responseArea.scrollHeight; | |
| }); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| responseArea.innerHTML = '<p class="error">抱歉，处理您的请求时出现错误。</p>'; | |
| } finally { | |
| submitBtn.disabled = false; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |