Add Git Commit Agent UI

index.html

@@ -1,19 +1,91 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Developer Git Commit Agent</title>
+    <style>
+        body { font-family: monospace; background-color: #121212; color: #ffffff; padding: 40px; margin: 0; }
+        .container { max-width: 800px; margin: 0 auto; }
+        h1 { border-bottom: 1px solid #333; padding-bottom: 10px; color: #00ff66; }
+        textarea { width: 100%; height: 200px; background-color: #1e1e1e; color: #00ff66; border: 1px solid #333; padding: 10px; font-family: monospace; box-sizing: border-box; resize: vertical; }
+        button { background-color: #00ff66; color: #121212; border: none; padding: 12px 20px; font-weight: bold; cursor: pointer; margin-top: 15px; width: 100%; font-family: monospace; }
+        button:hover { background-color: #00cc55; }
+        .output-box { margin-top: 30px; background-color: #1e1e1e; border-left: 4px solid #00ff66; padding: 15px; white-space: pre-wrap; display: none; }
+        .loading { color: #ffaa00; margin-top: 15px; display: none; }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h1>🤖 Developer Git Commit Agent</h1>
+    <p>Paste your code adjustments or Git diff block below to generate a standardized commit message using the free serverless API.</p>
+    
+    <textarea id="gitDiff" placeholder="Example:&#10;- const port = 3000;&#10;+ const port = process.env.PORT || 5000;"></textarea>
+    
+    <button onclick="generateCommit()">Generate Commit Message</button>
+    
+    <div id="loadingStatus" class="loading">⚙️ Processing diff via Serverless Inference API (this can take a moment if the model is waking up)...</div>
+    <div id="outputBox" class="output-box"></div>
+</div>
+
+<script>
+async function generateCommit() {
+    // Configured automatically with your username
+    const MODEL_ID = "nivethitha1703/developer-git-commit-agent";
+    
+    const diffText = document.getElementById("gitDiff").value;
+    const outputBox = document.getElementById("outputBox");
+    const loadingStatus = document.getElementById("loadingStatus");
+    
+    if (!diffText.trim()) {
+        alert("Please paste a git diff first!");
+        return;
+    }
+    
+    outputBox.style.display = "none";
+    loadingStatus.style.display = "block";
+    
+    // Construct the instruction format for your fine-tuned chat model
+    const prompt = `<|im_start|>system\nYou are an expert software engineer agent. Write a concise, professional Git commit message based on the provided code diff.<|im_end|>\n<|im_start|>user\nCode Diff:\n${diffText}<|im_end|>\n<|im_start|>assistant\n`;
+    
+    try {
+        const response = await fetch(`https://huggingface.co{MODEL_ID}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                inputs: prompt,
+                parameters: { max_new_tokens: 60, temperature: 0.4 }
+            })
+        });
+        
+        const data = await response.json();
+        loadingStatus.style.display = "none";
+        
+        if (data.error) {
+            outputBox.innerText = "API Error: " + data.error;
+        } else if (Array.isArray(data) && data[0] && data[0].generated_text) {
+            let result = data[0].generated_text;
+            result = result.replace(prompt, "").trim();
+            outputBox.innerText = result;
+        } else if (data.generated_text) {
+            let result = data.generated_text;
+            result = result.replace(prompt, "").trim();
+            outputBox.innerText = result;
+        } else {
+            outputBox.innerText = JSON.stringify(data);
+        }
+        outputBox.style.display = "block";
+        
+    } catch (error) {
+        loadingStatus.style.display = "none";
+        outputBox.innerText = "Error calling Inference API: " + error.message;
+        outputBox.style.display = "block";
+    }
+}
+</script>
+
+</body>
 </html>