Spaces:
Running
Running
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Thunder AI</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://js.puter.com/v2/"></script> <style> body { font-family: 'Google Sans', Arial, sans-serif; background-color: #121212; color: #ffffff; height: 100vh; margin: 0; display: flex; flex-direction: column; } .chat-container { height: calc(100vh - 110px); overflow-y: auto; } .message-user { background-color: #1e1e1e; border-radius: 18px 18px 0 18px; } .message-ai { background-color: #1f1f1f; border-radius: 18px 18px 18px 0; position: relative; } .input-container { box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.1); } .speak-btn { cursor: pointer; margin-left: 10px; font-size: 18px; background: none; border: none; color: #4285f4; } .voice-button { position: absolute; bottom: 8px; right: -40px; background: #4285f4; color: white; border-radius: 50%; width: 28px; height: 28px; font-size: 18px; display: flex; align-items: center; justify-content: center; } #menuModal { display: none; position: absolute; top: 60px; right: 20px; background: #1e1e1e; box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2); border-radius: 10px; z-index: 100; } #menuModal p { padding: 10px 15px; cursor: pointer; font-size: 14px; color: #4285f4; } #menuModal p:hover { background: #333333; } </style> </head> <body> <header class="bg-gray-800 shadow-sm py-3 px-4 flex items-center justify-between relative"> <div class="flex items-center"> <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold mr-3">T</div> <h1 class="text-xl font-medium">Thunder AI</h1> </div> <div class="flex items-center space-x-2"> <button id="restart-btn" class="text-gray-400 hover:bg-gray-700 p-2 rounded-full"> <span class="material-icons">refresh</span> </button> <button id="menu-btn" class="text-gray-400 hover:bg-gray-700 p-2 rounded-full"> <span class="material-icons">menu</span> </button> </div> <div id="menuModal"> <p onclick="alert('Chat saved!')">Save Chat</p> <p onclick="alert('For any query: moodthunder00@gmail.com')">Help</p> </div> </header> <div id="chatBox" class="chat-container flex-1 overflow-y-auto p-4 space-y-4"> <div class="message-ai p-4 shadow-sm max-w-[80%]"> <p class="text-gray-200">Hello! How can I help you today?</p> </div> </div> <div class="input-container bg-gray-800 p-4"> <div class="max-w-3xl mx-auto flex items-end space-x-2"> <div class="flex-1 bg-gray-700 rounded-full px-4 py-3 flex items-center"> <textarea id="userInput" class="flex-1 bg-transparent outline-none resize-none max-h-32 overflow-y-auto" placeholder="Message Anything...." rows="1"></textarea> <button class="material-icons speak-btn" onclick="readLastMessage()">volume_up</button> <button class="material-icons speak-btn" onclick="startVoiceInput()">mic</button> </div> <button onclick="sendMessage()" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3"> <span class="material-icons">send</span> </button> </div> <div class="text-xs text-gray-400 text-center mt-2 flex justify-center space-x-4"> <a href="https://t.me/Thunderownerx" target="_blank" class="hover:text-blue-600"><span class="material-icons">telegram</span></a> <a href="https://instagram.com/Thunderownerx" target="_blank" class="hover:text-pink-600"><span class="material-icons">photo_camera</span></a> <span>Contact Us <strong>moodthunder00@gmail.com</strong></span> </div> </div> <script> const tools = [ { type: "function", function: { name: "get_weather", description: "Get current weather for a given location", parameters: { type: "object", properties: { location: { type: "string", description: "City name e.g. Paris, London" } }, required: ["location"] }, strict: true } } ]; function getWeather(location) { const data = { 'Paris': '22°C, Partly Cloudy', 'London': '18°C, Rainy', 'Tokyo': '28°C, Clear', 'New York': '25°C, Sunny' }; return data[location] || '20°C, Unknown'; } let lastAIMessage = ""; document.getElementById("restart-btn").addEventListener("click", () => { document.getElementById("chatBox").innerHTML = ""; }); document.getElementById("menu-btn").addEventListener("click", () => { const modal = document.getElementById("menuModal"); modal.style.display = modal.style.display === "block" ? "none" : "block"; }); async function sendMessage(text = null) { const input = document.getElementById("userInput"); const message = text || input.value.trim(); if (!message) return; appendMessage(message, 'user'); input.value = ''; try { const completion = await puter.ai.chat(message, { tools }); let finalResponse; if (completion.message.tool_calls && completion.message.tool_calls.length > 0) { const toolCall = completion.message.tool_calls[0]; if (toolCall.function.name === 'get_weather') { const args = JSON.parse(toolCall.function.arguments); const result = getWeather(args.location); finalResponse = await puter.ai.chat([ { role: "user", content: message }, completion.message, { role: "tool", tool_call_id: toolCall.id, content: result } ]); } } else { finalResponse = completion; } const reply = finalResponse.message?.content || "Sorry, no reply."; appendMessage(reply, 'ai'); lastAIMessage = reply; } catch (err) { appendMessage("API Error: " + err.message, 'ai'); } } function appendMessage(text, sender) { const chatBox = document.getElementById("chatBox"); const msgDiv = document.createElement("div"); msgDiv.className = `flex items-start space-x-3 max-w-3xl mx-auto ${sender === 'user' ? 'justify-end' : ''}`; if (sender === 'user') { msgDiv.innerHTML = ` <div class='message-user p-4 shadow-sm max-w-[80%]'><p class='text-gray-200'>${text}</p></div> <div class='w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500'><span class='material-icons'>person</span></div>`; } else { const safeText = text.replace(/[`\\]/g, '\\$&'); // 🔥 Yeh line important hai! msgDiv.innerHTML = ` <div class='w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600'><span class='material-icons'>smart_toy</span></div> <div class='message-ai p-4 shadow-sm max-w-[80%] relative'> <p class='text-gray-200'>${text}</p> <div class="voice-button" onclick="playVoice(\`${safeText}\`)">🔊</div> </div>`; } chatBox.appendChild(msgDiv); chatBox.scrollTop = chatBox.scrollHeight; } function readLastMessage() { if (lastAIMessage) playVoice(lastAIMessage); else alert("No AI message to read."); } function playVoice(text) { const utter = new SpeechSynthesisUtterance(text); utter.lang = "en-US"; utter.rate = 1; speechSynthesis.speak(utter); } function startVoiceInput() { try { const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.lang = "en-US"; recognition.start(); recognition.onresult = (event) => { const transcript = event.results[0][0].transcript; sendMessage(transcript); }; recognition.onerror = (event) => { alert("Voice input error: " + event.error); }; } catch (err) { alert("Your browser doesn't support voice input."); } } </script></body> </html> isme gmail se our phone number se id login hone ka system dalo signing our login ka our chat history save ho same like chat gpt - Initial Deployment
35e7740 verified | title: thunderai | |
| emoji: 🐳 | |
| colorFrom: blue | |
| colorTo: yellow | |
| sdk: static | |
| pinned: false | |
| tags: | |
| - deepsite | |
| Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference |