Spaces:

Asqwehvg
/

aaa

No application file

App Files Files Community

aaa

by Asqwehvg - opened Aug 25, 2024

base: refs/heads/main

←

from: refs/pr/2

Discussion Files changed

+282

-0

Files changed (1) hide show

chat-with-ai-website.html +282 -0

chat-with-ai-website.html ADDED Viewed

	@@ -0,0 +1,282 @@

+<!DOCTYPE html>
+<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>