Update index.html

index.html

@@ -1,19 +1,127 @@
-<!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>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>COBOL → Python Translator</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f1117; color: #e0e0e0; padding: 2rem; }
+  h1 { font-size: 1.6rem; color: #fff; margin-bottom: 0.4rem; }
+  .subtitle { color: #888; font-size: 0.9rem; margin-bottom: 2rem; }
+  .badge { display: inline-block; background: #1e293b; border: 1px solid #334; color: #94a3b8; font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; margin-right: 6px; }
+  .examples { display: flex; flex-direction: column; gap: 1.5rem; max-width: 860px; margin: 0 auto; }
+  .card { background: #1a1d27; border: 1px solid #2a2d3a; border-radius: 10px; overflow: hidden; }
+  .card-header { padding: 0.75rem 1rem; background: #13151f; font-size: 0.8rem; color: #666; border-bottom: 1px solid #2a2d3a; }
+  .split { display: grid; grid-template-columns: 1fr 1fr; }
+  .pane { padding: 1rem; }
+  .pane:first-child { border-right: 1px solid #2a2d3a; }
+  .lang { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
+  .cobol-label { color: #f59e0b; }
+  .python-label { color: #34d399; }
+  pre { font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; }
+  .cobol { color: #fcd34d; }
+  .python { color: #6ee7b7; }
+  .stats { display: flex; gap: 2rem; justify-content: center; margin: 0 auto 2rem; max-width: 860px; }
+  .stat { text-align: center; }
+  .stat-val { font-size: 1.4rem; font-weight: 700; color: #fff; }
+  .stat-label { font-size: 0.75rem; color: #666; margin-top: 2px; }
+  .links { text-align: center; margin-top: 2rem; }
+  .links a { color: #818cf8; text-decoration: none; margin: 0 1rem; font-size: 0.9rem; }
+  .links a:hover { text-decoration: underline; }
+  @media(max-width: 600px) { .split { grid-template-columns: 1fr; } .pane:first-child { border-right: none; border-bottom: 1px solid #2a2d3a; } }
+</style>
+</head>
+<body>
+
+<div style="max-width:860px;margin:0 auto">
+  <h1>COBOL → Python Translator</h1>
+  <p class="subtitle">
+    <span class="badge">Qwen2.5-Coder-1.5B</span>
+    <span class="badge">QLoRA · Unsloth</span>
+    <span class="badge">Training loss 2.14 → 0.13</span>
+  </p>
+
+  <div class="stats">
+    <div class="stat"><div class="stat-val">1.5B</div><div class="stat-label">Parameters</div></div>
+    <div class="stat"><div class="stat-val">125</div><div class="stat-label">Training steps</div></div>
+    <div class="stat"><div class="stat-val">0.13</div><div class="stat-label">Final loss</div></div>
+    <div class="stat"><div class="stat-val">94%</div><div class="stat-label">Loss reduction</div></div>
+  </div>
+
+  <div class="examples">
+
+    <div class="card">
+      <div class="card-header">Example 1 — Arithmetic computation</div>
+      <div class="split">
+        <div class="pane">
+          <div class="lang cobol-label">COBOL</div>
+          <pre class="cobol">COMPUTE WS-TAX = WS-PRICE * WS-TAX-RATE</pre>
+        </div>
+        <div class="pane">
+          <div class="lang python-label">Python</div>
+          <pre class="python">from decimal import Decimal
+ws_tax = Decimal(str(ws_price)) * Decimal(str(ws_tax_rate))</pre>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">Example 2 — String move</div>
+      <div class="split">
+        <div class="pane">
+          <div class="lang cobol-label">COBOL</div>
+          <pre class="cobol">MOVE WS-CUSTOMER-NAME TO WS-OUTPUT-NAME</pre>
+        </div>
+        <div class="pane">
+          <div class="lang python-label">Python</div>
+          <pre class="python">ws_output_name = ws_customer_name</pre>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">Example 3 — Conditional logic</div>
+      <div class="split">
+        <div class="pane">
+          <div class="lang cobol-label">COBOL</div>
+          <pre class="cobol">IF WS-BALANCE > ZERO
+   PERFORM CREDIT-ROUTINE
+END-IF</pre>
+        </div>
+        <div class="pane">
+          <div class="lang python-label">Python</div>
+          <pre class="python">if ws_balance > 0:
+    credit_routine()</pre>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">Example 4 — Loop</div>
+      <div class="split">
+        <div class="pane">
+          <div class="lang cobol-label">COBOL</div>
+          <pre class="cobol">PERFORM VARYING WS-IDX FROM 1 BY 1
+    UNTIL WS-IDX > WS-MAX
+    ADD 1 TO WS-TOTAL
+END-PERFORM</pre>
+        </div>
+        <div class="pane">
+          <div class="lang python-label">Python</div>
+          <pre class="python">for ws_idx in range(1, ws_max + 1):
+    ws_total += 1</pre>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="links">
+    <a href="https://huggingface.co/dishants0605/qwen2.5-cobol-python-translator">Model on HuggingFace</a>
+    <a href="https://github.com/dishantSasane/Cobol-Python-Fine-Tuning">GitHub</a>
+  </div>
+</div>
+
+</body>
+</html>