Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>🇮🇳 TIRANGA - Advanced AI</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> | |
| /* --- BASE RESET & VARIABLES --- */ | |
| *{margin:0;padding:0;box-sizing:border-box;} | |
| :root{ | |
| --bg-color: #ffffff; --bg-secondary: #f9f9fb; --text-main: #1d1d1f; --text-muted: #86868b; | |
| --accent: #FF9933; --accent-green: #138808; --accent-hover: #e68a2e; | |
| --border-light: rgba(0, 0, 0, 0.08); --border-focus: rgba(255, 153, 51, 0.3); | |
| --glass-bg: rgba(255, 255, 255, 0.85); --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); | |
| --shadow-lg: 0 16px 48px rgba(0,0,0,0.12); | |
| --font-serif: 'Instrument Serif', serif; --font-sans: 'Inter', -apple-system, 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;} | |
| /* --- TIRANGA BACKGROUND --- */ | |
| .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: linear-gradient(135deg, rgba(255,153,51,0.05) 0%, rgba(255,255,255,1) 50%, rgba(19,136,8,0.05) 100%);} | |
| .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.5;animation:drift 25s ease-in-out infinite alternate;} | |
| .orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(255,153,51,0.2),transparent 70%);top:-150px;left:-100px;} | |
| .orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(19,136,8,0.18),transparent 70%);bottom:-100px;right:-100px;animation-delay:-10s;} | |
| @keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(60px,40px) scale(1.05);}} | |
| /* --- MAIN LAYOUT (CHAT + WORKSPACE) --- */ | |
| .shell{position:relative;z-index:1;display:flex;height:100vh;width:100vw;overflow:hidden;} | |
| .sidebar{width:280px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);flex-shrink:0;z-index:30;} | |
| .main-wrapper{flex:1;display:flex;position:relative;overflow:hidden;} | |
| .chat-main{flex:1;display:flex;flex-direction:column;background:transparent;position:relative;min-width:300px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);} | |
| .workspace{width:0;background:#fafafa;border-left:1px solid var(--border-light);display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:-10px 0 30px rgba(0,0,0,0.02);z-index:25;} | |
| .workspace.open{width:50%;} | |
| /* --- SIDEBAR & BRANDING --- */ | |
| .logo-area{padding:24px 20px;border-bottom:1px solid var(--border-light);} | |
| .logo-row{display:flex;align-items:center;gap:12px;} | |
| .logo-img{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);background:#fff;} | |
| .logo-text{line-height:1.2;} | |
| .logo-name{font-family:var(--font-sans);font-weight:800;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;display:flex;flex-direction:column;gap: 20px;} | |
| .settings::-webkit-scrollbar{width:4px;} | |
| .settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;} | |
| /* Custom Toggle Switch for Thinking */ | |
| .toggle-wrapper {display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 16px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);} | |
| .toggle-label {font-size: 13px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 8px;} | |
| .toggle-label span {font-size: 11px; color: var(--text-muted); font-weight: 500; display: block; margin-top: 2px;} | |
| .switch {position: relative; display: inline-block; width: 44px; height: 24px;} | |
| .switch input {opacity: 0; width: 0; height: 0;} | |
| .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e5ea; transition: .4s; border-radius: 24px;} | |
| .slider:before {position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);} | |
| input:checked + .slider {background-color: var(--accent-green);} | |
| input:checked + .slider:before {transform: translateX(20px);} | |
| .brand-box {background: #ffffff;border: 1px solid var(--border-light);border-radius: var(--radius-md);padding: 24px 16px;text-align: center;box-shadow: var(--shadow-sm);margin-top:auto;} | |
| .brand-box img {width: 70px; height: 70px; border-radius: 16px; object-fit: cover; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);} | |
| .brand-box h3 {font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px;} | |
| .brand-box p {font-size: 10px; font-weight: 600; color: var(--accent-green); line-height: 1.4; letter-spacing: 0.5px;} | |
| .clear-btn{width:100%;padding:12px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;} | |
| .clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;} | |
| /* --- CHAT AREA --- */ | |
| .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;z-index:10;} | |
| .model-badge{font-size:13px;font-weight:600;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;position:relative;} | |
| .messages::-webkit-scrollbar{width:6px;} | |
| .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;} | |
| /* Welcome Screen & Prompts */ | |
| .welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;margin:auto;animation:fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;width:100%;max-width:650px;} | |
| @keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}} | |
| .welcome-logo{width:80px;height:80px;border-radius:24px;object-fit:cover;box-shadow:var(--shadow-md);margin-bottom:24px;border:1px solid var(--border-light);} | |
| .welcome-title{font-size:32px;font-weight:800;letter-spacing:-1px;margin-bottom:12px;} | |
| .welcome-sub{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:32px;max-width: 500px;} | |
| .ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;} | |
| .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(-3px);box-shadow:var(--shadow-md);border-color:var(--accent);} | |
| .ex-title{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px;display:flex;align-items:center;gap:6px;} | |
| .ex-desc{font-size:12px;color:var(--text-muted);line-height:1.4;} | |
| /* Messages */ | |
| .msg{display:flex;gap:16px;animation:msgIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;max-width:85%;} | |
| @keyframes msgIn{from{opacity:0;transform:translateY(15px) scale(0.96);}to{opacity:1;transform:none;}} | |
| .msg.user{flex-direction:row-reverse;align-self:flex-end;} | |
| .msg.bot{align-self:flex-start;} | |
| .avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;overflow:hidden;} | |
| .msg.user .avatar{background:#f0f0f0;color:var(--text-main);border:1px solid var(--border-light);} | |
| .msg.bot .avatar{border:1px solid var(--border-light);background:#fff;padding:2px;} | |
| .msg.bot .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;} | |
| .body{display:flex;flex-direction:column;gap:6px;max-width:100%; width: 100%;} | |
| .msg.user .body{align-items:flex-end;} | |
| .bubble{padding:16px 20px;font-size:15px;line-height:1.6;color:var(--text-main);position:relative;word-break:break-word;overflow-wrap:anywhere;} | |
| .msg.user .bubble{background:var(--text-main);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:var(--shadow-sm);} | |
| .msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;} | |
| /* BOT ACTIONS (Copy Button below text) */ | |
| .msg-actions{display:flex;gap:8px;margin-top:4px;padding-left:12px;opacity:0.7;transition:opacity 0.2s;} | |
| .msg.bot:hover .msg-actions{opacity:1;} | |
| .action-btn{background:var(--bg-secondary);border:1px solid var(--border-light);color:var(--text-main);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;transition:all 0.2s;} | |
| .action-btn:hover{background:#e5e5ea;transform:translateY(-1px);} | |
| /* Reasoning / Thinking Box */ | |
| .think-box {background: #fdfdfd;border: 1px solid var(--border-light);border-left: 4px solid var(--accent-green);border-radius: 8px;padding: 14px 16px;margin-bottom: 16px;font-family: var(--font-mono);font-size: 13.5px;color: var(--text-muted);line-height: 1.5;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);} | |
| .think-title {font-weight: 600; color: var(--text-main); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; font-family: var(--font-sans);} | |
| /* Controlled by body class */ | |
| body:not(.show-thinking) .think-box {display: none;} | |
| /* Markdown inside bubble */ | |
| .bubble p{margin-bottom:12px;} | |
| .bubble p:last-child{margin-bottom:0;} | |
| .bubble code{font-family:var(--font-mono);background:rgba(0,0,0,0.05);padding:3px 6px;border-radius:6px;font-size:0.85em;color:#e83e8c;} | |
| .msg.user .bubble code{background:rgba(255,255,255,0.2);color:#fff;} | |
| .bubble img{max-width:100%;border-radius:12px;margin:10px 0;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);} | |
| .bubble pre {display: none;} /* Native pre hidden since we override code blocks */ | |
| /* Workspace Trigger Card in Chat */ | |
| .ws-trigger-card {background: var(--bg-secondary);border: 1px solid var(--border-light);border-radius: 12px;padding: 16px;margin: 12px 0;display: flex;align-items: center;justify-content: space-between;box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);} | |
| .ws-trigger-info {display: flex;align-items: center;gap: 12px;} | |
| .ws-trigger-icon {width: 44px;height: 44px;border-radius: 10px;background: #fff;display: flex;align-items: center;justify-content: center;font-size: 22px;box-shadow: var(--shadow-sm);border: 1px solid var(--border-light);} | |
| .ws-trigger-text h4 {font-size: 14px;font-weight: 600;margin-bottom: 2px;} | |
| .ws-trigger-text p {font-size: 12px;color: var(--text-muted);font-family: var(--font-mono);text-transform: uppercase;} | |
| .ws-btn {padding: 8px 16px;background: var(--text-main);color: #fff;border: none;border-radius: 8px;font-size: 13px;font-weight: 600;cursor: pointer;transition: all 0.2s;} | |
| .ws-btn:hover {transform: scale(1.05); background: var(--accent);} | |
| /* Typing & Cursor */ | |
| .blinking-cursor {display: inline-block; width: 8px; height: 16px; background: var(--accent); margin-left: 4px; animation: blink 1s step-end infinite; vertical-align: middle;} | |
| @keyframes blink { 50% { opacity: 0; } } | |
| .typing{display:flex;align-items:center;gap:6px;padding:4px;} | |
| .typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);opacity:0.4;animation:bounce 1.4s infinite ease-in-out both;} | |
| .typing span:nth-child(1){animation-delay:-0.32s;}.typing span:nth-child(2){animation-delay:-0.16s;} | |
| @keyframes bounce{0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}} | |
| /* --- SCROLL TO BOTTOM BUTTON (Centered) --- */ | |
| .scroll-bottom-btn {position:absolute;bottom:120px;left:50%;width:44px;height:44px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-main);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index:20;} | |
| .scroll-bottom-btn.show {opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);} | |
| .scroll-bottom-btn:hover {background:#fff;transform:translateX(-50%) translateY(-3px);box-shadow:var(--shadow-lg);} | |
| /* --- INPUT AREA --- */ | |
| .input-container{padding:0 40px 30px;background:linear-gradient(to top, var(--bg-color) 70%, transparent);position:relative;z-index:20;} | |
| .input-wrap{display:flex;flex-direction:column;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s, border-color 0.3s;} | |
| .input-wrap:focus-within{border-color:var(--border-focus);box-shadow:0 12px 40px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,153,51,0.1);} | |
| .img-prev-inline{display:none;padding:12px 20px 0;align-items:center;gap:12px;} | |
| .img-prev-inline.show{display:flex;animation:fadeIn 0.3s;} | |
| .inline-th{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border-light);} | |
| .inline-info{flex:1;} | |
| .inline-nm{font-size:12px;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;} | |
| .inline-rm{background:rgba(0,0,0,0.05);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;} | |
| .inline-rm:hover{background:#ff3b30;color:#fff;} | |
| .input-row{display:flex;align-items:flex-end;gap:12px;padding:12px 16px 12px 20px;} | |
| .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:8px 0;} | |
| .chat-ta::placeholder{color:var(--text-muted);} | |
| /* Modern Attachment & Send */ | |
| .attach-btn{width:38px;height:38px;border-radius:12px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all 0.2s;position:relative;overflow:hidden;padding-bottom:4px;} | |
| .attach-btn:hover{background:rgba(0,0,0,0.04);color:var(--text-main);} | |
| .attach-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;} | |
| .attach-btn svg{width:20px;height:20px;} | |
| .send-btn{width:42px;height:42px;border-radius:14px;border:none;background:linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.1);} | |
| .send-btn svg{width:18px;height:18px;fill:#1d1d1f;transition:transform 0.2s;} | |
| .send-btn:hover{box-shadow:0 6px 16px rgba(255,153,51,0.3);transform:translateY(-1px);} | |
| .send-btn:hover svg{transform:translate(2px, -2px);} | |
| .send-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(100%);transform:none;} | |
| .input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;} | |
| /* --- WORKSPACE PANEL --- */ | |
| .ws-hdr{padding:14px 20px;border-bottom:1px solid var(--border-light);background:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;} | |
| .ws-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;} | |
| .ws-actions{display:flex;gap:8px;} | |
| .ws-icon-btn{padding:6px 12px;border-radius:8px;background:var(--bg-secondary);border:1px solid var(--border-light);cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text-main);transition:all 0.2s;font-size:12px;font-weight:600;} | |
| .ws-icon-btn:hover{background:#e5e5ea;} | |
| .ws-close{padding:6px;background:transparent;border-color:transparent;} | |
| .ws-close:hover{color:#ff3b30;background:#fff0f0;} | |
| .ws-content{flex:1;overflow-y:auto;background:#fafafa;padding:20px;} | |
| .ws-content pre{margin:0;padding:20px;background:#fff;border:1px solid var(--border-light);border-radius:12px;font-family:var(--font-mono);font-size:14px;line-height:1.6;overflow-x:auto;box-shadow:var(--shadow-sm);} | |
| /* --- RESPONSIVE MOBILE --- */ | |
| @media(max-width:850px){ | |
| .sidebar{position:absolute;left:-280px;z-index:100;height:100%;transition:left 0.3s;} | |
| .sidebar.show{left:0;box-shadow:var(--shadow-lg);} | |
| .workspace.open{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;} | |
| .messages{padding:20px;} | |
| .input-container{padding:0 20px 20px;} | |
| .msg{max-width:95%;} | |
| .scroll-bottom-btn{bottom:110px;} | |
| } | |
| </style> | |
| </head> | |
| <!-- Body controls the thinking visibility --> | |
| <body class="show-thinking"> | |
| <div class="bg"> | |
| <div class="orb orb1"></div> | |
| <div class="orb orb2"></div> | |
| </div> | |
| <div class="shell"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="logo-area"> | |
| <div class="logo-row"> | |
| <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="logo-img"> | |
| <div class="logo-text"> | |
| <div class="logo-name">TIRANGA</div> | |
| <div class="logo-sub">Advanced Edition</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="settings"> | |
| <!-- Reasoning Toggle --> | |
| <div class="toggle-wrapper"> | |
| <div class="toggle-label"> | |
| 🧠 Reasoning Mode | |
| <span>Show internal thinking</span> | |
| </div> | |
| <label class="switch"> | |
| <input type="checkbox" id="thinkingToggle" checked onchange="toggleThinking(this)"> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| <div class="brand-box"> | |
| <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Identity"> | |
| <h3>TIRANGA</h3> | |
| <p>ALWAYS BE FORWARD NEVER BE BACKWARD!!</p> | |
| </div> | |
| <button class="clear-btn" onclick="clearMemory()">🗑️ Clear Chat Memory</button> | |
| </div> | |
| </aside> | |
| <!-- Main Chat Area --> | |
| <div class="main-wrapper"> | |
| <main class="chat-main" id="chatMain"> | |
| <header class="chat-hdr"> | |
| <div class="model-badge"> | |
| <div class="status-dot"></div> | |
| TIRANGA Intelligence | |
| </div> | |
| </header> | |
| <div class="messages" id="msgs" onscroll="checkScroll()"> | |
| <!-- Welcome Screen --> | |
| <div class="welcome" id="welcome"> | |
| <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="welcome-logo"> | |
| <div class="welcome-title">Welcome, Divy Patel!</div> | |
| <div class="welcome-sub">I am TIRANGA. I am equipped with advanced reasoning, workspace coding, and image generation. How can I assist you today?</div> | |
| <div class="ex-grid"> | |
| <div class="ex-card" onclick="sendEx('Write a python script for a simple HTTP server. Provide the code.')"> | |
| <div class="ex-title">💻 Code Generation</div> | |
| <div class="ex-desc">Generate secure, workspace-ready code</div> | |
| </div> | |
| <div class="ex-card" onclick="sendEx('Create an image of a futuristic Indian city with flying cars, highly detailed, 8k resolution.')"> | |
| <div class="ex-title">🎨 Generate Images</div> | |
| <div class="ex-desc">Stunning visuals using Pollinations AI</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scroll to bottom button (Centered) --> | |
| <button class="scroll-bottom-btn" id="scrollBtn" onclick="forceScrollDown()"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg> | |
| </button> | |
| <!-- Input Area --> | |
| <div class="input-container"> | |
| <div class="input-wrap"> | |
| <div class="img-prev-inline" id="imgPrev"> | |
| <img class="inline-th" id="imgThumb" src=""> | |
| <div class="inline-info"> | |
| <div class="inline-nm" id="imgName">image.png</div> | |
| </div> | |
| <button class="inline-rm" onclick="removeImg()">✕</button> | |
| </div> | |
| <div class="input-row"> | |
| <button class="attach-btn" title="Upload Image"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg> | |
| <input type="file" accept="image/*" onchange="handleFile(this)" id="fileInput"> | |
| </button> | |
| <textarea class="chat-ta" id="chatInput" placeholder="Message TIRANGA..." rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea> | |
| <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">TIRANGA is engineered for extreme performance. Verified by Divy Patel.</div> | |
| </div> | |
| </main> | |
| <!-- Workspace Panel --> | |
| <aside class="workspace" id="workspace"> | |
| <div class="ws-hdr"> | |
| <div class="ws-title"> | |
| <span>💻</span> | |
| <span id="wsTitleText">Generated Code</span> | |
| </div> | |
| <div class="ws-actions"> | |
| <button class="ws-icon-btn" onclick="copyWorkspaceCode()" id="wsCopyBtn">📋 Copy</button> | |
| <button class="ws-icon-btn ws-close" onclick="closeWorkspace()" title="Close">✕</button> | |
| </div> | |
| </div> | |
| <div class="ws-content"> | |
| <pre><code id="wsCodeBlock" class="hljs"></code></pre> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <script> | |
| // --- STATE MANAGEMENT --- | |
| const S = { | |
| history: [], | |
| pending: null, | |
| busy: false, | |
| isUserScrolling: false, | |
| codeBlocks: [], // Securely stores raw code to prevent HTML escaping bugs | |
| currentWorkspaceId: null | |
| }; | |
| function toggleThinking(el) { | |
| if(el.checked) document.body.classList.add('show-thinking'); | |
| else document.body.classList.remove('show-thinking'); | |
| } | |
| // Memory initialization | |
| window.onload = () => { | |
| const saved = localStorage.getItem('tiranga_v3_memory'); | |
| if(saved) { | |
| try { | |
| S.history = JSON.parse(saved); | |
| if(S.history.length > 0) { | |
| document.getElementById('welcome').style.display = 'none'; | |
| S.history.forEach(msg => { | |
| if(msg.role === 'user') appendUserDOM(msg.content, msg.badge); | |
| else appendBotDOM(msg.content); | |
| }); | |
| setTimeout(forceScrollDown, 100); | |
| } | |
| } catch(e) {} | |
| } | |
| }; | |
| function saveMemory() { | |
| const memToSave = S.history.slice(-20); | |
| localStorage.setItem('tiranga_v3_memory', JSON.stringify(memToSave)); | |
| } | |
| function clearMemory() { | |
| localStorage.removeItem('tiranga_v3_memory'); | |
| location.reload(); | |
| } | |
| // --- FILE HANDLING --- | |
| 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]; | |
| S.pending={type: 'image', data: base64Data, name: f.name}; | |
| document.getElementById('imgThumb').src = e.target.result; | |
| document.getElementById('imgName').textContent=f.name; | |
| document.getElementById('imgPrev').classList.add('show'); | |
| }; | |
| r.readAsDataURL(f); | |
| } | |
| function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';} | |
| // --- UI INTERACTIONS --- | |
| 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';} | |
| function checkScroll() { | |
| const m = document.getElementById('msgs'); | |
| // Show center button only if user scrolled UP more than 80px | |
| const isAtBottom = Math.abs((m.scrollHeight - m.scrollTop) - m.clientHeight) < 80; | |
| S.isUserScrolling = !isAtBottom; | |
| const btn = document.getElementById('scrollBtn'); | |
| if(S.isUserScrolling) btn.classList.add('show'); | |
| else btn.classList.remove('show'); | |
| } | |
| function forceScrollDown(){ | |
| const m=document.getElementById('msgs'); | |
| m.scrollTo({top: m.scrollHeight, behavior: 'smooth'}); | |
| S.isUserScrolling = false; | |
| document.getElementById('scrollBtn').classList.remove('show'); | |
| } | |
| function autoScroll() { | |
| if(!S.isUserScrolling) { | |
| const m=document.getElementById('msgs'); | |
| m.scrollTop = m.scrollHeight; | |
| } | |
| } | |
| // --- COPY UTILS --- | |
| function copyText(btn, text) { | |
| navigator.clipboard.writeText(text); | |
| const orig = btn.innerHTML; | |
| btn.innerHTML = "✓ Copied"; | |
| setTimeout(() => btn.innerHTML = orig, 2000); | |
| } | |
| function copyWorkspaceCode() { | |
| if(S.currentWorkspaceId !== null) { | |
| navigator.clipboard.writeText(S.codeBlocks[S.currentWorkspaceId].code); | |
| const btn = document.getElementById('wsCopyBtn'); | |
| const orig = btn.innerHTML; | |
| btn.innerHTML = "✓ Copied"; | |
| setTimeout(() => btn.innerHTML = orig, 2000); | |
| } | |
| } | |
| // --- WORKSPACE LOGIC --- | |
| function openWorkspace(id) { | |
| S.currentWorkspaceId = id; | |
| const block = S.codeBlocks[id]; | |
| document.getElementById('wsTitleText').textContent = block.lang ? `Generated ${block.lang.toUpperCase()}` : "Generated Code"; | |
| const codeBlock = document.getElementById('wsCodeBlock'); | |
| codeBlock.className = `hljs language-${block.lang || 'plaintext'}`; | |
| codeBlock.textContent = block.code; | |
| hljs.highlightElement(codeBlock); | |
| document.getElementById('workspace').classList.add('open'); | |
| if(window.innerWidth <= 850) { document.getElementById('sidebar').classList.remove('show'); } | |
| } | |
| function closeWorkspace() { document.getElementById('workspace').classList.remove('open'); } | |
| // --- MARKED.JS CUSTOM RENDERER (Fixes the Workspace Bug Completely) --- | |
| const renderer = new marked.Renderer(); | |
| renderer.code = function(token) { | |
| // Marked v12 might pass object or string based on usage. Safely extract. | |
| const codeText = typeof token === 'string' ? token : (token.text || ''); | |
| const language = typeof token === 'string' ? arguments[1] : (token.lang || ''); | |
| const id = S.codeBlocks.length; | |
| S.codeBlocks.push({ code: codeText, lang: language }); | |
| // Return the Beautiful Trigger Card | |
| return ` | |
| <div class="ws-trigger-card"> | |
| <div class="ws-trigger-info"> | |
| <div class="ws-trigger-icon">💻</div> | |
| <div class="ws-trigger-text"> | |
| <h4>Code Generated</h4> | |
| <p>${language || 'Snippet'}</p> | |
| </div> | |
| </div> | |
| <button class="ws-btn" onclick="openWorkspace(${id})">View in Workspace</button> | |
| </div> | |
| `; | |
| }; | |
| marked.use({ renderer }); | |
| // Custom Thinking Parser | |
| function parseThinking(raw) { | |
| const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/gi; | |
| let text = raw; | |
| let thinkContent = ''; | |
| text = text.replace(thinkRegex, (match, p1) => { | |
| thinkContent += p1; | |
| return ''; | |
| }); | |
| return { mainText: text.trim(), thinkText: thinkContent.trim() }; | |
| } | |
| // --- MAIN CHAT LOGIC --- | |
| 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 = []; | |
| let badge = null; | |
| if(S.pending) { | |
| attachments.push(S.pending); | |
| badge = '📎 '+S.pending.name; | |
| appendUserDOM(msg || '[Image Attached]', badge); | |
| S.history.push({role: 'user', content: msg || '[Image Attached]', badge: badge}); | |
| } else { | |
| appendUserDOM(msg); | |
| S.history.push({role: 'user', content: msg}); | |
| } | |
| removeImg(); | |
| saveMemory(); | |
| const botDiv = document.createElement('div');botDiv.className='msg bot'; | |
| botDiv.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div></div>`; | |
| document.getElementById('msgs').appendChild(botDiv); | |
| forceScrollDown(); | |
| // Integrated Pollinations AI at Model Level (Using System Prompt constraints) | |
| const sysPrompt = `You are TIRANGA, a state-of-the-art AI assistant. Developed by Divy Patel. | |
| Always communicate respectfully. | |
| CRITICAL IMAGE GENERATION PROTOCOL: | |
| If the user asks to generate, create, or draw an image/photo, you MUST generate the image by responding with a markdown image tag using Pollinations AI. | |
| Format to use:  | |
| Available models for {MODEL}: flux, flux-realism, flux-anime, flux-3d. | |
| Choose the best model based on the prompt. Example: if user says anime, use flux-anime. | |
| Always include this markdown tag when image generation is requested.`; | |
| const payload = { | |
| message: msg, | |
| attachments: attachments, | |
| system_prompt: sysPrompt, | |
| max_tokens: 4096, | |
| temperature: 0.7 | |
| }; | |
| 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; | |
| renderBotText(botDiv, accumulatedText, true); | |
| autoScroll(); | |
| } | |
| } catch (e) { } | |
| } | |
| } | |
| } | |
| // Final Render without cursor | |
| renderBotText(botDiv, accumulatedText, false); | |
| // Save to history | |
| S.history.push({role: 'bot', content: accumulatedText}); | |
| saveMemory(); | |
| }catch(err){ | |
| renderBotText(botDiv,`**Error:** Server communication failed.`, false); | |
| } | |
| S.busy=false; | |
| document.getElementById('sendBtn').disabled=false; | |
| autoScroll(); | |
| } | |
| function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();} | |
| // --- DOM INJECTION --- | |
| function appendUserDOM(text, badgeText){ | |
| let bHtml = badgeText ? `<div style="font-size:11px;color:var(--accent);margin-bottom:4px;font-weight:600;">${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); | |
| } | |
| function appendBotDOM(content) { | |
| const el=document.createElement('div');el.className='msg bot'; | |
| el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"></div></div>`; | |
| document.getElementById('msgs').appendChild(el); | |
| renderBotText(el, content, false); | |
| } | |
| // Render Markdown + Thinking Toggle + Actions | |
| function renderBotText(el, raw, isStreaming) { | |
| const b = el.querySelector('.bubble'); | |
| // 1. Separate Thinking and Main Text | |
| const { mainText, thinkText } = parseThinking(raw); | |
| // 2. Parse Markdown | |
| let html = ''; | |
| // Attach Thinking block if exists | |
| if (thinkText) { | |
| html += `<div class="think-box"><div class="think-title">🧠 Reasoning Process</div>${esc(thinkText)}</div>`; | |
| } | |
| html += marked.parse(mainText); | |
| // Add Blinking Cursor if streaming | |
| if(isStreaming) { | |
| html += '<span class="blinking-cursor"></span>'; | |
| } | |
| b.innerHTML = html; | |
| // 3. Add Copy Action Button below bubble (only once streaming is done or if it's history load) | |
| let actionsDiv = el.querySelector('.msg-actions'); | |
| if(!isStreaming && !actionsDiv && mainText.trim().length > 0) { | |
| const cleanRaw = mainText.replace(/"/g, '"').replace(/'/g, "\\'").replace(/\n/g, '\\n'); | |
| const actionsHTML = ` | |
| <div class="msg-actions"> | |
| <button class="action-btn" onclick="copyText(this, \`${cleanRaw}\`)"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> | |
| Copy Text | |
| </button> | |
| </div> | |
| `; | |
| el.querySelector('.body').insertAdjacentHTML('beforeend', actionsHTML); | |
| } | |
| } | |
| function esc(t){return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');} | |
| </script> | |
| </body> | |
| </html> | |