Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Sheelu Katiyar commited on May 22

Commit

f4a40f2

verified ·

1 Parent(s): 19fff5d

Create index.html

Browse files

Files changed (1) hide show

index.html +274 -0

index.html ADDED Viewed

	@@ -0,0 +1,274 @@

+<!DOCTYPE html>
+<html lang="hi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Creative Aura Gen 2.0</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: #ffffff;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            height: 100vh;
+            color: #222;
+        }
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            max-width: 850px;
+            margin: 0 auto;
+            border-left: 1px solid #eaeaea;
+            border-right: 1px solid #eaeaea;
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(25px);
+            -webkit-backdrop-filter: blur(25px);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02);
+        }
+        .header {
+            padding: 22px;
+            text-align: center;
+            border-bottom: 1px solid #eaeaea;
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(10px);
+            font-weight: 600;
+            font-size: 1.25rem;
+            color: #111;
+            letter-spacing: -0.3px;
+        }
+        .chat-box {
+            flex: 1;
+            padding: 25px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+        .message {
+            max-width: 82%;
+            padding: 14px 20px;
+            border-radius: 22px;
+            line-height: 1.6;
+            font-size: 1.05rem;
+            word-wrap: break-word;
+        }
+        .user-message {
+            align-self: flex-end;
+            background-color: #f3f3f3;
+            color: #000;
+            border-bottom-right-radius: 5px;
+        }
+        .bot-message {
+            align-self: flex-start;
+            background-color: #ffffff;
+            border: 1px solid #eaeaea;
+            color: #232323;
+            border-bottom-left-radius: 5px;
+            box-shadow: 0 4px 14px rgba(0,0,0,0.02);
+        }
+        .input-area {
+            padding: 20px;
+            border-top: 1px solid #eaeaea;
+            background: rgba(255, 255, 255, 0.95);
+            display: flex;
+            gap: 14px;
+            align-items: center;
+        }
+        .file-upload {
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+        }
+        .file-upload input[type=file] {
+            font-size: 100px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+        .upload-btn {
+            background-color: #fafafa;
+            border: 1px solid #eaeaea;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.3rem;
+            color: #444;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .upload-btn:hover {
+            background-color: #f0f0f0;
+            transform: scale(1.02);
+        }
+        input[type="text"] {
+            flex: 1;
+            padding: 15px 22px;
+            border: 1px solid #eaeaea;
+            border-radius: 26px;
+            outline: none;
+            font-size: 1.02rem;
+            background: #ffffff;
+            transition: all 0.2s ease;
+        }
+        input[type="text"]:focus {
+            border-color: #b5b5b5;
+            box-shadow: 0 0 0 4px rgba(0,0,0,0.03);
+        }
+        button.send-btn {
+            background-color: #000000;
+            color: #ffffff;
+            border: none;
+            border-radius: 26px;
+            padding: 14px 28px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        button.send-btn:hover {
+            background-color: #222;
+        }
+        button.send-btn:active {
+            transform: scale(0.97);
+        }
+        .attachment-preview {
+            display: none;
+            padding: 12px 25px;
+            background: #fbfbfb;
+            border-top: 1px solid #eaeaea;
+            font-size: 0.95rem;
+            color: #555;
+        }
+        .preview-img {
+            max-height: 220px;
+            border-radius: 14px;
+            margin-top: 12px;
+            border: 1px solid #e2e2e2;
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="header">Creative Aura Gen 2.0 ✨</div>
+        <div class="chat-box" id="chat-box">
+            <div class="message bot-message">नमस्ते अभय भाई! मैं Creative Aura Gen 2.0 हूँ। यह एक एडवांस मल्टीमोडल सिस्��म है। आप मुझसे कोई भी सवाल पूछ सकते हैं, या इमेज और ऑडियो अपलोड करके उसपर चर्चा कर सकते हैं।</div>
+        </div>
+        <div class="attachment-preview" id="attachment-preview"></div>
+        <div class="input-area">
+            <div class="file-upload">
+                <button class="upload-btn">📎</button>
+                <input type="file" id="file-input" accept="image/*,audio/*" onchange="handleFile(event)">
+            </div>
+            <input type="text" id="user-input" placeholder="कुछ पूछें या फ़ाइल अपलोड करें..." onkeypress="handleEnter(event)">
+            <button class="send-btn" onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+    <script>
+        let currentAttachment = null;
+        function handleFile(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const base64Data = e.target.result.split(',')[1];
+                let type = 'file';
+                if (file.type.startsWith('image/')) type = 'image';
+                else if (file.type.startsWith('audio/')) type = 'audio';
+                currentAttachment = { type: type, data: base64Data };
+                const preview = document.getElementById('attachment-preview');
+                preview.style.display = 'block';
+                preview.innerHTML = `संलग्न फ़ाइल: <strong>${file.name}</strong> <button onclick="clearAttachment()" style="margin-left:12px; border:none; background:none; color:#ff3b30; cursor:pointer; font-weight:bold;">❌</button>`;
+            };
+            reader.readAsDataURL(file);
+        }
+        function clearAttachment() {
+            currentAttachment = null;
+            document.getElementById('attachment-preview').style.display = 'none';
+            document.getElementById('file-input').value = '';
+        }
+        function handleEnter(event) {
+            if (event.key === "Enter") sendMessage();
+        }
+        async function sendMessage() {
+            const inputField = document.getElementById('user-input');
+            const message = inputField.value.trim();
+            if (!message && !currentAttachment) return;
+            const chatBox = document.getElementById('chat-box');
+            let userHTML = `<div class="message user-message">${message}`;
+            if (currentAttachment && currentAttachment.type === 'image') {
+                userHTML += `<br><img src="data:image/jpeg;base64,${currentAttachment.data}" class="preview-img">`;
+            } else if (currentAttachment && currentAttachment.type === 'audio') {
+                userHTML += `<br><em>🎵 [ऑडियो इनपुट संलग्न]</em>`;
+            }
+            userHTML += `</div>`;
+            chatBox.innerHTML += userHTML;
+            let attachments = [];
+            if (currentAttachment) attachments.push(currentAttachment);
+            inputField.value = '';
+            clearAttachment();
+            chatBox.scrollTop = chatBox.scrollHeight;
+            const botMsgId = "bot-" + Date.now();
+            chatBox.innerHTML += `<div class="message bot-message" id="${botMsgId}">सोच रहा हूँ...</div>`;
+            chatBox.scrollTop = chatBox.scrollHeight;
+            try {
+                const response = await fetch('/api/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message: message, attachments: attachments })
+                });
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                const botDiv = document.getElementById(botMsgId);
+                botDiv.innerHTML = "";
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    const chunk = decoder.decode(value, {stream: true});
+                    const lines = chunk.split('\n');
+                    for (let line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const dataStr = line.substring(6);
+                            if (dataStr.trim() === '[DONE]') continue;
+                            try {
+                                const dataObj = JSON.parse(dataStr);
+                                if (dataObj.choices && dataObj.choices[0].delta.content) {
+                                    let text = dataObj.choices[0].delta.content;
+                                    text = text.replace(/\n/g, '<br>');
+                                    botDiv.innerHTML += text;
+                                    chatBox.scrollTop = chatBox.scrollHeight;
+                                }
+                            } catch (e) { }
+                        }
+                    }
+                }
+            } catch (error) {
+                document.getElementById(botMsgId).innerHTML = "त्रुटि: सर्वर से प्रतिक्रिया नहीं मिल सकी।";
+            }
+        }
+    </script>
+</body>
+</html>