Spaces:

Moniquekeys95
/

QuickChatBot

Running

App Files Files Community

Moniquekeys95 commited on May 21

Commit

6f3e28d

verified ·

1 Parent(s): dd9f776

Update index.html

Browse files

Files changed (1) hide show

index.html +186 -18

index.html CHANGED Viewed

@@ -1,19 +1,187 @@
-<!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">
+    <title>JavaScript Code Analyzer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/jshint.js"></script>
+</head>
+<body class="bg-gray-100 p-8">
+    <div class="container mx-auto">
+        <h1 class="text-3xl font-bold mb-6 text-center">
+            JavaScript Code Analysis Tool
+        </h1>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Code Editor -->
+            <div>
+                <h2 class="text-xl font-semibold mb-4">Input JavaScript Code</h2>
+                <div
+                    id="editor"
+                    class="h-96 border rounded-lg"
+                >// Paste your JavaScript code here
+function exampleFunction() {
+    // Your code goes here
+}
+                </div>
+            </div>
+            <!-- Results Panel -->
+            <div>
+                <h2 class="text-xl font-semibold mb-4">Analysis Results</h2>
+                <div
+                    id="analysisResults"
+                    class="bg-white border rounded-lg p-4 h-96 overflow-y-auto"
+                >
+                    <div id="lintingErrors" class="mb-4">
+                        <h3 class="font-bold text-red-600">Linting Errors</h3>
+                    </div>
+                    <div id="consoleOutput">
+                        <h3 class="font-bold text-green-600">Console Output</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Action Buttons -->
+        <div class="flex justify-center space-x-4 mt-6">
+            <button
+                id="lintButton"
+                class="bg-yellow-500 text-white px-6 py-2 rounded hover:bg-yellow-600"
+            >
+                Lint Code
+            </button>
+            <button
+                id="runButton"
+                class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600"
+            >
+                Run Code
+            </button>
+            <button
+                id="autoFixButton"
+                class="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600"
+            >
+                Auto Fix
+            </button>
+        </div>
+    </div>
+    <script>
+        const editor = ace.edit("editor");
+        editor.setTheme("ace/theme/monokai");
+        editor.session.setMode("ace/mode/javascript");
+        editor.setOptions({
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true
+        });
+        document.getElementById('lintButton').addEventListener('click', () => {
+            const code = editor.getValue();
+            const lintingErrors = document.getElementById('lintingErrors');
+            lintingErrors.innerHTML = '<h3 class="font-bold text-red-600">Linting Errors</h3>';
+            JSHINT(code, {
+                esversion: 6,
+                asi: true,
+                unused: true,
+                globals: {
+                    console: true,
+                    window: true,
+                    document: true
+                }
+            });
+            if (JSHINT.errors.length > 0) {
+                JSHINT.errors.forEach((error, index) => {
+                    if (error) {
+                        const errorEl = document.createElement('div');
+                        errorEl.innerHTML = `
+                            <span class="text-red-500">Error ${index + 1}:</span>
+                            Line ${error.line}: ${error.reason}
+                        `;
+                        errorEl.className = 'mt-2 p-2 bg-red-50 rounded';
+                        lintingErrors.appendChild(errorEl);
+                    }
+                });
+            } else {
+                const successEl = document.createElement('div');
+                successEl.textContent = '✅ No linting errors found!';
+                successEl.className = 'text-green-600 mt-2';
+                lintingErrors.appendChild(successEl);
+            }
+        });
+        document.getElementById('runButton').addEventListener('click', () => {
+            const consoleOutput = document.getElementById('consoleOutput');
+            consoleOutput.innerHTML = '<h3 class="font-bold text-green-600">Console Output</h3>';
+            try {
+                const code = editor.getValue();
+                const originalLog = console.log;
+                const logs = [];
+                console.log = (...args) => {
+                    logs.push(args.map(arg =>
+                        typeof arg === 'object' ? JSON.stringify(arg) : arg
+                    ).join(' '));
+                };
+                const runCode = new Function('console', code);
+                runCode(console);
+                console.log = originalLog;
+                logs.forEach(log => {
+                    const logEl = document.createElement('div');
+                    logEl.textContent = log;
+                    consoleOutput.appendChild(logEl);
+                });
+            } catch (error) {
+                const errorEl = document.createElement('div');
+                errorEl.innerHTML = `
+                    <span class="text-red-500">🚨 Execution Error:</span>
+                    ${error.message}
+                `;
+                errorEl.className = 'mt-2 p-2 bg-red-50 rounded';
+                consoleOutput.appendChild(errorEl);
+            }
+        });
+        document.getElementById('autoFixButton').addEventListener('click', () => {
+            const code = editor.getValue();
+            const lintingErrors = document.getElementById('lintingErrors');
+            lintingErrors.innerHTML = '<h3 class="font-bold text-green-600">Auto-Fix Suggestions</h3>';
+            let fixedCode = code;
+            // Basic auto-fix strategies
+            fixedCode = fixedCode.replace(/([^;])\s*$/gm, '$1;');
+            const unclosedStringRegex = /([`'"])[^'"]*$/gm;
+            if (unclosedStringRegex.test(fixedCode)) {
+                fixedCode = fixedCode.replace(unclosedStringRegex, '$1');
+            }
+            const undefinedVarRegex = /\b(\w+)\s*=[^;]+;(?!\s*const|\s*let|\s*var)/g;
+            fixedCode = fixedCode.replace(undefinedVarRegex, 'let $1 = $&');
+            editor.setValue(fixedCode, -1);
+            const suggestionsEl = document.createElement('div');
+            suggestionsEl.innerHTML = `
+                ✅ Auto-Fixed:
+                <ul>
+                    <li>• Added missing semicolons</li>
+                    <li>• Closed unclosed strings</li>
+                    <li>• Declared potential undefined variables</li>
+                </ul>
+            `;
+            suggestionsEl.className = 'mt-2 p-2 bg-green-50 rounded';
+            lintingErrors.appendChild(suggestionsEl);
+        });
+    </script>
+</body>
 </html>