Deploy OdiaGPT-Web interactive Space

README.md

@@ -1,10 +1,17 @@
 ---
-title: OdiaGPT Web
-emoji: 🐨
+title: OdiaGPT Web Demo
+emoji: 🛕
 colorFrom: purple
-colorTo: green
+colorTo: indigo
 sdk: static
 pinned: false
+license: apache-2.0
+short_description: Interactive Web UI for OdiaGPT-30M
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# OdiaGPT-30M Web Interface
+
+Interactive web application for **OdiaGPT-30M**, the first Odia autoregressive decoder-only Transformer built from scratch.
+
+- **Model Repository**: [CodeHima/OdiaGPT-30M](https://huggingface.co/CodeHima/OdiaGPT-30M)
+- **Live Colab Gradio**: [https://7165f80b8a0ec54d28.gradio.live](https://7165f80b8a0ec54d28.gradio.live)

index.html

@@ -1,19 +1,78 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="or">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ଓଡ଼ିଆଜିପିଟି (OdiaGPT-30M) — Interactive Demo</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background-color: #0f172a;
+            color: #f8fafc;
+            display: flex;
+            flex-direction: column;
+        }
+        header {
+            background: linear-gradient(135deg, #3b0764 0%, #1e1b4b 100%);
+            padding: 14px 24px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .title-group h1 {
+            margin: 0;
+            font-size: 1.3rem;
+            color: #faf5ff;
+        }
+        .title-group p {
+            margin: 2px 0 0 0;
+            font-size: 0.82rem;
+            color: #e9d5ff;
+        }
+        .links a {
+            color: #c084fc;
+            text-decoration: none;
+            font-size: 0.9rem;
+            margin-left: 16px;
+            padding: 6px 12px;
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+        .links a:hover {
+            background: rgba(255, 255, 255, 0.16);
+            color: #ffffff;
+        }
+        .iframe-container {
+            flex: 1;
+            width: 100%;
+            position: relative;
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="title-group">
+            <h1>ଓଡ଼ିଆଜିପିଟି (OdiaGPT-30M) Live Interactive Web UI</h1>
+            <p>100% From-Scratch Decoder-Only Transformer • 31.5M Parameters • 8K SentencePiece</p>
+        </div>
+        <div class="links">
+            <a href="https://huggingface.co/CodeHima/OdiaGPT-30M" target="_blank">🤗 Model Card</a>
+            <a href="https://7165f80b8a0ec54d28.gradio.live" target="_blank">🔗 Fullscreen Gradio</a>
+        </div>
+    </header>
+    <div class="iframe-container">
+        <iframe src="https://7165f80b8a0ec54d28.gradio.live" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+</body>
 </html>