Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Sheelu Katiyar commited on May 22

Commit

0261885

verified ·

1 Parent(s): d0796d1

Update index.html

Browse files

Files changed (1) hide show

index.html +391 -249

index.html CHANGED Viewed

@@ -1,274 +1,416 @@
 <!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>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>🧬 Aura Gen 2.0</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
+<style>
+/* आपका पूरा CSS यहाँ है (बिना किसी बदलाव के) */
+*{margin:0;padding:0;box-sizing:border-box;}
+:root{
+  --bg-color: #ffffff; --bg-secondary: #f5f5f7; --text-main: #1d1d1f; --text-muted: #86868b;
+  --accent: #0071e3; --accent-hover: #0077ed; --border-light: rgba(0, 0, 0, 0.08);
+  --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.4);
+  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 8px 32px rgba(0,0,0,0.08);
+  --font-serif: 'Instrument Serif', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'Geist Mono', monospace; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px;
+}
+html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
+.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: #fafafa;}
+.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.4;animation:drift 25s ease-in-out infinite alternate;}
+.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,113,227,0.15),transparent 70%);top:-150px;left:-100px;}
+.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(52,199,89,0.12),transparent 70%);bottom:-100px;right:-100px;animation-delay:-10s;}
+@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(80px,50px) scale(1.1);}}
+.shell{position:relative;z-index:1;display:grid;grid-template-columns:280px 1fr;height:100vh;}
+.sidebar{display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);overflow:hidden;}
+.logo-area{padding:24px 20px;border-bottom:1px solid var(--border-light);}
+.logo-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
+.logo-img{width:48px;height:48px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);}
+.logo-text{line-height:1.2;}
+.logo-name{font-family:var(--font-sans);font-weight:700;font-size:18px;color:var(--text-main);letter-spacing:-0.5px;}
+.logo-sub{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
+.settings{padding:20px;flex:1;overflow-y:auto;}
+.settings::-webkit-scrollbar{width:4px;}
+.settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:10px;}
+.section-lbl{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;}
+.field{margin-bottom:20px;}
+.field-lbl{font-size:12px;font-weight:500;color:var(--text-main);margin-bottom:8px;display:block;}
+.field textarea{width:100%;background:#ffffff;border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-main);font-family:var(--font-sans);font-size:13px;line-height:1.5;padding:12px;resize:none;outline:none;transition:border-color 0.2s, box-shadow 0.2s;height:80px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.02);}
+.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,0.15);}
+.sl-wrap{margin-bottom:16px;}
+.sl-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
+.sl-title{font-size:12px;font-weight:500;color:var(--text-main);}
+.sl-val{font-size:11px;font-weight:500;font-family:var(--font-mono);background:#ffffff;color:var(--text-muted);padding:2px 8px;border-radius:6px;border:1px solid var(--border-light);}
+input[type=range]{width:100%;height:4px;appearance:none;background:rgba(0,0,0,0.1);border-radius:2px;outline:none;}
+input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.2);border:1px solid var(--border-light);cursor:pointer;transition:transform 0.1s;}
+input[type=range]::-webkit-slider-thumb:active{transform:scale(1.1);}
+.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
+.chip{font-size:11px;font-weight:500;padding:4px 10px;border-radius:14px;background:#ffffff;border:1px solid var(--border-light);color:var(--text-muted);cursor:pointer;transition:all 0.2s;}
+.chip:hover{background:var(--accent);color:#ffffff;border-color:var(--accent);}
+.clear-btn{width:100%;padding:10px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s;margin-top:10px;}
+.clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;}
+.chat-main{display:flex;flex-direction:column;background:transparent;overflow:hidden;position:relative;}
+.chat-hdr{padding:14px 24px;border-bottom:1px solid var(--border-light);background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:10;}
+.model-badge{font-size:13px;font-weight:600;color:var(--text-main);display:flex;align-items:center;gap:8px;}
+.status-dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 2px rgba(52,199,89,0.2);}
+.messages{flex:1;overflow-y:auto;padding:30px 40px;display:flex;flex-direction:column;gap:24px;scroll-behavior:smooth;}
+.messages::-webkit-scrollbar{width:6px;}
+.messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
+.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;flex:1;min-height:400px;animation:fadeIn 0.5s ease-out;}
+@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
+.welcome-logo{width:80px;height:80px;border-radius:20px;object-fit:cover;box-shadow:var(--shadow-md);margin-bottom:24px;}
+.welcome-title{font-family:var(--font-sans);font-size:32px;font-weight:700;color:var(--text-main);letter-spacing:-1px;margin-bottom:12px;}
+.welcome-sub{font-size:15px;color:var(--text-muted);max-width:500px;line-height:1.5;margin-bottom:32px;}
+.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:600px;}
+.ex-card{background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:16px;cursor:pointer;text-align:left;transition:all 0.2s;box-shadow:var(--shadow-sm);}
+.ex-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(0,113,227,0.3);}
+.ex-title{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px;}
+.ex-desc{font-size:12px;color:var(--text-muted);line-height:1.4;}
+.msg{display:flex;gap:16px;animation:msgIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;max-width:85%;}
+@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(0.98);}to{opacity:1;transform:none;}}
+.msg.user{flex-direction:row-reverse;align-self:flex-end;}
+.msg.bot{align-self:flex-start;}
+.avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
+.msg.user .avatar{background:var(--bg-secondary);color:var(--text-main);border:1px solid var(--border-light);}
+.msg.bot .avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--border-light);}
+.body{display:flex;flex-direction:column;gap:4px;}
+.msg.user .body{align-items:flex-end;}
+.bubble{padding:14px 18px;font-size:14.5px;line-height:1.6;color:var(--text-main);}
+.msg.user .bubble{background:var(--accent);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:0 4px 12px rgba(0,113,227,0.2);}
+.msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;}
+.bubble p{margin-bottom:10px;}
+.bubble p:last-child{margin-bottom:0;}
+.bubble pre{background:#f5f5f7;border:1px solid rgba(0,0,0,0.05);border-radius:12px;padding:12px;margin:10px 0;overflow-x:auto;font-family:var(--font-mono);font-size:13px;}
+.msg.user .bubble pre{background:rgba(255,255,255,0.1);border:none;color:#fff;}
+.bubble code{font-family:var(--font-mono);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:6px;font-size:0.9em;}
+.msg.user .bubble code{background:rgba(255,255,255,0.2);}
+.bubble pre code{background:transparent;padding:0;}
+.code-wrap{position:relative;margin:12px 0;}
+.code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#e5e5ea;border-radius:12px 12px 0 0;border:1px solid rgba(0,0,0,0.05);border-bottom:none;}
+.code-lang-tag{font-size:12px;font-weight:600;color:var(--text-muted);font-family:var(--font-mono);}
+.copy-btn{padding:4px 12px;border-radius:8px;background:#ffffff;border:1px solid rgba(0,0,0,0.1);color:var(--text-main);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s;}
+.copy-btn:hover{background:#f5f5f7;}
+.code-wrap pre{border-radius:0 0 12px 12px;margin:0;}
+.think-blk {background: rgba(0, 0, 0, 0.02);border: 1px solid rgba(0, 0, 0, 0.08);border-radius: 12px;padding: 12px 16px;margin-bottom: 14px;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);transition: all 0.3s ease;}
+.think-blk:hover {background: rgba(0, 0, 0, 0.04);}
+.think-hdr {display: flex;align-items: center;font-size: 13px;font-weight: 600;color: var(--text-muted);cursor: pointer;user-select: none;}
+.think-hdr::before {content: '►';font-size: 10px;margin-right: 10px;transition: transform 0.2s ease;color: #a1a1a6;}
+.think-blk.open .think-hdr::before {transform: rotate(90deg);}
+.think-body {margin-top: 12px;display: none;border-top: 1px dashed rgba(0,0,0,0.1);padding-top: 12px;font-size: 13.5px;color: var(--text-muted);line-height: 1.6;font-family: var(--font-mono);white-space: pre-wrap;}
+.think-blk.open .think-body {display: block;animation: fadeInDown 0.3s ease;}
+@keyframes fadeInDown {from { opacity: 0; transform: translateY(-5px); }to { opacity: 1; transform: translateY(0); }}
+.typing{display:flex;align-items:center;gap:6px;padding:8px 4px;}
+.typing span{width:8px;height:8px;border-radius:50%;background:var(--text-muted);opacity:0.4;animation:bounce 1s ease-in-out infinite;}
+.typing span:nth-child(2){animation-delay:0.2s;}
+.typing span:nth-child(3){animation-delay:0.4s;}
+@keyframes bounce{0%,100%{transform:translateY(0);opacity:0.4;}50%{transform:translateY(-6px);opacity:1;}}
+.input-container{padding:0 40px 30px;background:linear-gradient(to top, var(--bg-color) 70%, transparent);position:relative;z-index:10;}
+.input-wrap{display:flex;align-items:flex-end;gap:12px;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;padding:10px 14px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s;}
+.input-wrap:focus-within{box-shadow:0 12px 40px rgba(0,0,0,0.12), 0 0 0 3px rgba(0,113,227,0.1);}
+.chat-ta{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-sans);font-size:15px;color:var(--text-main);line-height:1.5;resize:none;max-height:200px;min-height:24px;padding:10px 0;}
+.chat-ta::placeholder{color:var(--text-muted);}
+.input-acts{display:flex;align-items:center;gap:8px;padding-bottom:6px;}
+.icon-btn{width:36px;height:36px;border-radius:50%;background:#f5f5f7;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:16px;transition:all 0.2s;flex-shrink:0;}
+.icon-btn:hover{background:#e5e5ea;color:var(--text-main);}
+.file-btn{position:relative;}
+.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;}
+.send-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--text-main);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s, opacity 0.2s;}
+.send-btn svg{width:18px;height:18px;fill:currentColor;}
+.send-btn:hover{transform:scale(1.05);}
+.send-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none;}
+.input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;}
+.img-prev{display:none;padding:12px 20px;background:#f5f5f7;border-radius:16px;margin:0 40px 12px;border:1px solid var(--border-light);}
+.img-prev.show{display:flex;align-items:center;gap:12px;}
+.img-th{width:48px;height:48px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-sm);}
+.img-nm{font-size:13px;font-weight:600;color:var(--text-main);}
+.img-sz{font-size:11px;color:var(--text-muted);}
+.img-rm{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#e5e5ea;border:none;cursor:pointer;color:var(--text-muted);transition:background 0.2s;}
+.img-rm:hover{background:#ff3b30;color:#fff;}
+@media(max-width:768px){
+  .shell{grid-template-columns:1fr;}
+  .sidebar{display:none;}
+  .messages{padding:20px;}
+  .input-container{padding:0 20px 20px;}
+  .msg{max-width:95%;}
+}
+</style>
 </head>
 <body>
+<div class="bg">
+  <div class="orb orb1"></div>
+  <div class="orb orb2"></div>
+</div>
+<div class="shell">
+  <aside class="sidebar">
+    <div class="logo-area">
+      <div class="logo-row">
+        <img src="https://i.ibb.co/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" alt="Aura Logo" class="logo-img">
+        <div class="logo-text">
+          <div class="logo-name">Aura Gen 2.0</div>
+          <div class="logo-sub">Advanced AI System</div>
         </div>
+      </div>
+    </div>
+    <div class="settings">
+      <div class="section-lbl">Preferences</div>
+      <div class="field">
+        <span class="field-lbl">System Prompt (Instructions)</span>
+        <div class="presets">
+          <span class="chip" onclick="setPreset('general')">General</span>
+          <span class="chip" onclick="setPreset('code')">Code</span>
+          <span class="chip" onclick="setPreset('math')">Math</span>
         </div>
+        <textarea id="sysPrompt">You are Aura Gen 2.0, a state-of-the-art AI assistant developed by Divy Bhai. You possess world-class expertise in software engineering, advanced algorithmic logic, and complex problem-solving. Always provide highly optimized, secure, and precise solutions.</textarea>
+      </div>
+      <div class="sl-wrap">
+        <div class="sl-meta"><span class="sl-title">Max Tokens</span><span class="sl-val" id="tokVal">4096</span></div>
+        <input type="range" id="tokSl" min="64" max="16384" value="4096" step="64" oninput="document.getElementById('tokVal').textContent=this.value">
+      </div>
+      <div class="sl-wrap">
+        <div class="sl-meta"><span class="sl-title">Temperature</span><span class="sl-val" id="tempVal">0.60</span></div>
+        <input type="range" id="tempSl" min="0" max="1.5" value="0.6" step="0.05" oninput="document.getElementById('tempVal').textContent=parseFloat(this.value).toFixed(2)">
+      </div>
+      <button class="clear-btn" onclick="clearChat()">Clear Conversation</button>
     </div>
+  </aside>
+  <main class="chat-main">
+    <header class="chat-hdr">
+      <div class="model-badge">
+        <div class="status-dot"></div>
+        Aura Gen 2.0 Ready
+      </div>
+    </header>
+    <div class="img-prev" id="imgPrev">
+      <img class="img-th" id="imgThumb" src="">
+      <div>
+        <div class="img-nm" id="imgName">document.pdf</div>
+        <div class="img-sz" id="imgSize">0 KB</div>
+      </div>
+      <button class="img-rm" onclick="removeImg()">✕</button>
+    </div>
+    <div class="messages" id="msgs">
+      <div class="welcome" id="welcome">
+        <img src="https://i.ibb.co/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" alt="Aura Logo" class="welcome-logo">
+        <div class="welcome-title">How can I help you today?</div>
+        <div class="welcome-sub">I am Aura Gen 2.0. I specialize in coding, deep reasoning, and complex logic. Upload images or ask anything!</div>
+        <div class="ex-grid">
+          <div class="ex-card" onclick="sendEx('Write a modern React component with Tailwind CSS that displays a glass-morphism pricing card.')">
+            <div class="ex-title">Code Generation</div>
+            <div class="ex-desc">Write optimized, secure code</div>
+          </div>
+          <div class="ex-card" onclick="sendEx('Explain the Model Context Protocol (MCP) and how it improves AI latency compared to standard REST APIs.')">
+            <div class="ex-title">Deep Reasoning</div>
+            <div class="ex-desc">Step-by-step technical analysis</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="input-container">
+      <div class="input-wrap">
+        <textarea class="chat-ta" id="chatInput" placeholder="Message Aura Gen 2.0..." rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
+        <div class="input-acts">
+          <label class="icon-btn file-btn" title="Upload Image or File">
+            📎<input type="file" accept="image/*,audio/*,.txt,.pdf" onchange="handleFile(this)" id="fileInput">
+          </label>
+          <button class="send-btn" id="sendBtn" onclick="sendMsg()">
+            <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="input-hint">Aura Gen 2.0 can make mistakes. Consider verifying critical information.</div>
+    </div>
+  </main>
+</div>
+<script>
+const S={history:[],pending:null,busy:false,
+  presets:{
+    general:'You are Aura Gen 2.0, a state-of-the-art AI assistant developed by Divy Bhai. You possess world-class expertise in software engineering, advanced algorithmic logic, and complex problem-solving. Always provide highly optimized, secure, and precise solutions in English by default.',
+    code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing. Use modern best practices.',
+    math:'You are a world-class mathematician. Break problems step-by-step. Show full working. Use LaTeX where helpful.'
+  }
+};
+function setPreset(k){document.getElementById('sysPrompt').value=S.presets[k];}
+// मल्टीमोडल फ़ाइल हैंडलिंग
+function handleFile(input){
+  const f=input.files[0];if(!f)return;
+  const r=new FileReader();
+  r.onload=e=>{
+    const base64Data = e.target.result.split(',')[1];
+    let type = 'file';
+    if(f.type.startsWith('image/')) type = 'image';
+    else if(f.type.startsWith('audio/')) type = 'audio';
+    S.pending={type: type, data: base64Data, name: f.name, size: fmtSz(f.size)};
+    if(type === 'image') {
+        document.getElementById('imgThumb').src = e.target.result;
+        document.getElementById('imgThumb').style.display='block';
+    } else {
+        document.getElementById('imgThumb').style.display='none';
+    }
+    document.getElementById('imgName').textContent=f.name;
+    document.getElementById('imgSize').textContent=fmtSz(f.size);
+    document.getElementById('imgPrev').classList.add('show');
+  };
+  r.readAsDataURL(f);
+}
+function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
+function fmtSz(b){return b<1048576?`${(b/1024).toFixed(0)} KB`:`${(b/1048576).toFixed(1)} MB`;}
+function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
+function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px';}
+// 🌐 नई API कॉलिंग लॉजिक (Flask Backend के लिए)
+async function sendMsg(){
+  if(S.busy)return;
+  const inp=document.getElementById('chatInput');
+  const msg=inp.value.trim();if(!msg && !S.pending)return;
+  inp.value='';inp.style.height='auto';
+  document.getElementById('sendBtn').disabled=true;
+  S.busy=true;
+  const w=document.getElementById('welcome');
+  if(w)w.style.display='none';
+  let attachments = [];
+  if(S.pending) {
+      attachments.push(S.pending);
+      appendUser(msg || '[फ़ाइल संलग्न की गई]', '📎 '+S.pending.name);
+  } else {
+      appendUser(msg);
+  }
+  removeImg();
+  const botDiv=appendBot();
+  // साइडबार से वैल्यूज़ लेना
+  const sysPrompt = document.getElementById('sysPrompt').value.trim();
+  const maxTokens = parseInt(document.getElementById('tokSl').value);
+  const temp = parseFloat(document.getElementById('tempSl').value);
+  const payload = {
+      message: msg,
+      attachments: attachments,
+      system_prompt: sysPrompt,
+      max_tokens: maxTokens,
+      temperature: temp
+  };
+  try{
+    const res = await fetch('/api/chat', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(payload)
+    });
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let accumulatedText = "";
+    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) {
+                        accumulatedText += dataObj.choices[0].delta.content;
+                        renderBot(botDiv, accumulatedText);
+                        scrollDown();
                     }
+                } catch (e) { }
             }
         }
+    }
+  }catch(err){
+    renderBot(botDiv,`**Error:** सर्वर से संपर्क नहीं हो पाया। कृपया दोबारा प्रयास करें।`);
+  }
+  S.busy=false;
+  document.getElementById('sendBtn').disabled=false;
+  scrollDown();
+}
+function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();}
+function appendUser(text, badgeText){
+  let bHtml = badgeText ? `<div class="pdf-badge">${esc(badgeText)}</div>` : '';
+  const el=document.createElement('div');el.className='msg user';
+  el.innerHTML=`<div class="avatar">U</div><div class="body">${bHtml}<div class="bubble">${esc(text)}</div></div>`;
+  document.getElementById('msgs').appendChild(el);scrollDown();
+}
+function appendBot(){
+  const el=document.createElement('div');el.className='msg bot';
+  el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" class="avatar-img"></div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div></div>`;
+  document.getElementById('msgs').appendChild(el);scrollDown();return el;
+}
+function renderBot(el, raw) {
+  const b = el.querySelector('.bubble');
+  let thinkHtml = '';
+  let ans = raw;
+  const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/i;
+  let match = raw.match(thinkRegex);
+  if (match) {
+    const fullTag = match[0];
+    let chain = match[1].replace(/<[^>]+>/g, '').trim();
+    ans = raw.replace(fullTag, '').trim();
+    if (match[2] === '') {
+      thinkHtml = `<div class="think-blk open" style="border-color:var(--accent)"><div class="think-hdr">Reasoning <span class="typing" style="display:inline-flex;padding:0 4px"><span></span><span></span><span></span></span></div><div class="think-body">${esc(chain)}</div></div>`;
+      ans = '';
+    } else {
+      thinkHtml = `<div class="think-blk" onclick="this.classList.toggle('open')"><div class="think-hdr">Reasoning Process</div><div class="think-body">${esc(chain)}</div></div>`;
+    }
+  }
+  b.innerHTML = thinkHtml + md(ans);
+}
+(function setupMarked(){
+  if(typeof marked==='undefined')return;
+  const renderer=new marked.Renderer();
+  renderer.code=(code,lang)=>{
+    const language=lang&&hljs.getLanguage(lang)?lang:'plaintext';
+    const highlighted=hljs.highlight(code.text||code,{language}).value;
+    const escaped=(code.text||code).replace(/'/g,"\\'").replace(/\\n/g,"\\\\n");
+    return `<div class="code-wrap"><div class="code-header"><span class="code-lang-tag">${language}</span><button class="copy-btn" onclick="navigator.clipboard.writeText('${escaped}')">Copy</button></div><pre><code class="hljs">${highlighted}</code></pre></div>`;
+  };
+  marked.setOptions({renderer,breaks:true});
+})();
+function md(t){return marked?marked.parse(t):t;}
+function esc(t){return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
+function scrollDown(){const m=document.getElementById('msgs');m.scrollTop=m.scrollHeight;}
+function clearChat(){S.history=[];document.getElementById('msgs').innerHTML='';location.reload();}
+</script>
 </body>
 </html>