Spaces:

THARX
/

codethar

Running

codethar / index.html

alkawthar alhaqq

the app name is CodeThar and there's option for agent to help it ppl so please updata - Initial Deployment

f291ed6 verified 7 months ago

41.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Thar Agent - AI-Powered Development Assistant</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#0ea5e9',
	secondary: '#0f172a',
	dark: '#020617'
	}
	}
	}
	}
	</script>
	<style>
	.mode-btn.active {
	background-color: #0ea5e9;
	color: white;
	}

	.mode-btn:hover {
	background-color: #0ea5e9;
	color: white;
	}

	.animate-fade-in {
	animation: fadeIn 0.5s ease-in;
	}

	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	.code-editor {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 14px;
	line-height: 1.5;
	}

	.output-container {
	max-height: 500px;
	overflow-y: auto;
	}

	.status-indicator {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 8px;
	}

	.status-idle { background-color: #64748b; }
	.status-loading { background-color: #f59e0b; }
	.status-success { background-color: #10b981; }
	.status-error { background-color: #ef4444; }

	.feature-card {
	transition: all 0.3s ease;
	border: 1px solid #334155;
	}

	.feature-card:hover {
	transform: translateY(-5px);
	border-color: #0ea5e9;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
	}

	.hero-gradient {
	background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
	}
	</style>
	</head>
	<body class="bg-dark text-slate-200 min-h-screen flex flex-col">
	<div class="flex-grow">
	<!-- Header -->
	<header class="bg-secondary border-b border-slate-800">
	<div class="container mx-auto px-4 py-3 flex flex-col sm:flex-row justify-between items-center">
	<div class="flex items-center mb-4 sm:mb-0">
	<div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<h1 class="text-2xl font-bold text-white">Thar Agent</h1>
	</div>

	<nav class="flex flex-wrap justify-center gap-2">
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="home">
	Home
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="thar-agent">
	Thar Agent
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="design">
	Design
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="generate">
	Generate
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="review">
	Review
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="fix">
	Fix
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="tests">
	Tests
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="devops">
	DevOps
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="data">
	Data
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="research">
	Research
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="security">
	Security
	</button>
	<button class="mode-btn px-3 py-1.5 rounded-lg text-sm font-medium transition-colors" data-mode="docs">
	Docs
	</button>
	</nav>
	</div>
	</header>

	<!-- Main Content -->
	<main class="flex-grow container mx-auto px-4 py-8">
	<!-- Home View -->
	<div id="home-view" class="animate-fade-in">
	<section class="hero-gradient rounded-2xl p-8 mb-12 text-center">
	<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">AI-Powered Development Assistant</h1>
	<p class="text-xl text-slate-300 max-w-3xl mx-auto mb-8">
	Thar Agent helps you design, generate, review, and improve your code with the power of AI
	</p>
	<div class="flex justify-center">
	<button class="bg-primary hover:bg-cyan-500 text-white font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105">
	Get Started
	</button>
	</div>
	</section>

	<section class="mb-16">
	<h2 class="text-3xl font-bold text-center mb-12 text-white">Features</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<div class="feature-card bg-secondary p-6 rounded-xl">
	<div class="text-primary mb-4">
	<i class="fas fa-drafting-compass text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2 text-white">System Design</h3>
	<p class="text-slate-400">Generate comprehensive system designs from high-level requirements</p>
	</div>

	<div class="feature-card bg-secondary p-6 rounded-xl">
	<div class="text-primary mb-4">
	<i class="fas fa-code text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2 text-white">Code Generation</h3>
	<p class="text-slate-400">Create code in multiple languages based on your specifications</p>
	</div>

	<div class="feature-card bg-secondary p-6 rounded-xl">
	<div class="text-primary mb-4">
	<i class="fas fa-search text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2 text-white">Code Review</h3>
	<p class="text-slate-400">Get detailed feedback on your code quality and suggestions for improvement</p>
	</div>

	<div class="feature-card bg-secondary p-6 rounded-xl">
	<div class="text-primary mb-4">
	<i class="fas fa-bug text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2 text-white">Bug Fixing</h3>
	<p class="text-slate-400">Automatically identify and fix bugs in your code</p>
	</div>

	<div class="feature-card bg-secondary p-6 rounded-xl">
	<div class="text-primary mb-4">
	<i class="fas fa-vial text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2 text-white">Test Generation</h3>
	<p class="text-slate-400">Generate comprehensive test suites for your code</p>
	</div>

	<div class="feature-card bg-secondary p-6 rounded-xl">
	<div class="text-primary mb-4">
	<i class="fas fa-shield-alt text-3xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2 text-white">Security Scanning</h3>
	<p class="text-slate-400">Identify potential security vulnerabilities in your code</p>
	</div>
	</div>
	</section>

	<section class="text-center">
	<h2 class="text-3xl font-bold mb-6 text-white">How It Works</h2>
	<div class="flex flex-col md:flex-row justify-center items-center gap-8">
	<div class="flex flex-col items-center">
	<div class="bg-primary w-16 h-16 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-edit text-white text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-white mb-2">1. Describe</h3>
	<p class="text-slate-400 max-w-xs">Tell Thar Agent what you want to build or improve</p>
	</div>

	<div class="hidden md:block text-primary">
	<i class="fas fa-arrow-right text-3xl"></i>
	</div>

	<div class="flex flex-col items-center">
	<div class="bg-primary w-16 h-16 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-magic text-white text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-white mb-2">2. Process</h3>
	<p class="text-slate-400 max-w-xs">Our AI analyzes and processes your request</p>
	</div>

	<div class="hidden md:block text-primary">
	<i class="fas fa-arrow-right text-3xl"></i>
	</div>

	<div class="flex flex-col items-center">
	<div class="bg-primary w-16 h-16 rounded-full flex items-center justify-center mb-4">
	<i class="fas fa-download text-white text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold text-white mb-2">3. Receive</h3>
	<p class="text-slate-400 max-w-xs">Get high-quality code, designs, or solutions</p>
	</div>
	</div>
	</section>
	</div>

	<!-- Thar Agent View -->
	<div id="thar-agent-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Thar Agent</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Goal</label>
	<textarea
	id="thar-agent-goal"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="3"
	placeholder="Describe what you want to build..."></textarea>
	</div>
	<button id="run-thar-agent" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Run Thar Agent
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<div class="flex items-center mb-4">
	<div class="status-indicator status-idle" id="thar-agent-status"></div>
	<span id="thar-agent-status-text" class="text-slate-400">Idle</span>
	</div>
	<div id="thar-agent-output" class="bg-slate-800 rounded-lg p-4 min-h-[200px]">
	<p class="text-slate-500 text-center py-12">Results will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Design View -->
	<div id="design-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">System Design</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Design Prompt</label>
	<textarea
	id="design-prompt"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="4"
	placeholder="Describe the system you want to design..."></textarea>
	</div>
	<button id="run-design" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Generate Design
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Output</h3>
	<div id="design-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px]">
	<p class="text-slate-500 text-center py-12">Design will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Generate View -->
	<div id="generate-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Code Generation</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Prompt</label>
	<textarea
	id="generate-prompt"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="4"
	placeholder="Describe what you want to generate..."></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Language</label>
	<select id="generate-language" class="w-full bg-slate-800 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary">
	<option>Python</option>
	<option>JavaScript</option>
	<option>Java</option>
	<option>C++</option>
	</select>
	</div>
	<button id="run-generate" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Generate Code
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Output</h3>
	<div id="generate-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px] code-editor">
	<p class="text-slate-500 text-center py-12">Generated code will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Review View -->
	<div id="review-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Code Review</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Code to Review</label>
	<textarea
	id="review-code"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="6"
	placeholder="Paste your code here..."></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Language</label>
	<select id="review-language" class="w-full bg-slate-800 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary">
	<option>Python</option>
	<option>JavaScript</option>
	<option>Java</option>
	<option>C++</option>
	</select>
	</div>
	<button id="run-review" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Review Code
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Review Results</h3>
	<div id="review-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px]">
	<p class="text-slate-500 text-center py-12">Review results will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Fix View -->
	<div id="fix-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Code Fixer</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Code to Fix</label>
	<textarea
	id="fix-code"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="6"
	placeholder="Paste your code here..."></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Language</label>
	<select id="fix-language" class="w-full bg-slate-800 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary">
	<option>Python</option>
	<option>JavaScript</option>
	<option>Java</option>
	<option>C++</option>
	</select>
	</div>
	<button id="run-fix" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Fix Code
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Fixed Code</h3>
	<div id="fix-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px] code-editor">
	<p class="text-slate-500 text-center py-12">Fixed code will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Tests View -->
	<div id="tests-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Test Generator</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Code to Test</label>
	<textarea
	id="test-code"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="6"
	placeholder="Paste your code here..."></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Language</label>
	<select id="test-language" class="w-full bg-slate-800 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary">
	<option>Python</option>
	<option>JavaScript</option>
	<option>Java</option>
	<option>C++</option>
	</select>
	</div>
	<button id="run-tests" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Generate Tests
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Generated Tests</h3>
	<div id="test-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px] code-editor">
	<p class="text-slate-500 text-center py-12">Tests will appear here...</p>
	</div>
	</div>
	</div>

	<!-- DevOps View -->
	<div id="devops-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">DevOps Configuration</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">DevOps Prompt</label>
	<textarea
	id="devops-prompt"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="4"
	placeholder="Describe your DevOps requirements..."></textarea>
	</div>
	<button id="run-devops" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Generate Config
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Configuration</h3>
	<div id="devops-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px] code-editor">
	<p class="text-slate-500 text-center py-12">DevOps configuration will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Data View -->
	<div id="data-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Data Science Script</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Data Prompt</label>
	<textarea
	id="data-prompt"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="4"
	placeholder="Describe your data analysis requirements..."></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Language</label>
	<select id="data-language" class="w-full bg-slate-800 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary">
	<option>Python</option>
	<option>R</option>
	<option>SQL</option>
	</select>
	</div>
	<button id="run-data" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Generate Script
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Generated Script</h3>
	<div id="data-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px] code-editor">
	<p class="text-slate-500 text-center py-12">Data script will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Research View -->
	<div id="research-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Research Assistant</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Research Topic</label>
	<textarea
	id="research-prompt"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="4"
	placeholder="Describe the topic you want to research..."></textarea>
	</div>
	<button id="run-research" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Research Topic
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Research Results</h3>
	<div id="research-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px]">
	<p class="text-slate-500 text-center py-12">Research results will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Security View -->
	<div id="security-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Security Scanner</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Code to Scan</label>
	<textarea
	id="security-code"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="6"
	placeholder="Paste your code here..."></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Language</label>
	<select id="security-language" class="w-full bg-slate-800 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary">
	<option>Python</option>
	<option>JavaScript</option>
	<option>Java</option>
	<option>C++</option>
	</select>
	</div>
	<button id="run-security" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Scan Code
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Security Report</h3>
	<div id="security-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px]">
	<p class="text-slate-500 text-center py-12">Security report will appear here...</p>
	</div>
	</div>
	</div>

	<!-- Docs View -->
	<div id="docs-view" class="hidden animate-fade-in">
	<div class="bg-secondary rounded-xl p-6 mb-6">
	<h2 class="text-2xl font-bold text-white mb-4">Documentation Generator</h2>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Code to Document</label>
	<textarea
	id="docs-code"
	class="w-full bg-slate-800 text-white rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-primary"
	rows="6"
	placeholder="Paste your code here..."></textarea>
	</div>
	<div class="mb-4">
	<label class="block text-slate-400 mb-2">Language</label>
	<select id="docs-language" class="w-full bg-slate-800 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary">
	<option>Python</option>
	<option>JavaScript</option>
	<option>Java</option>
	<option>C++</option>
	</select>
	</div>
	<button id="run-docs" class="bg-primary hover:bg-cyan-500 text-white font-bold py-2 px-6 rounded-lg transition duration-300">
	Generate Docs
	</button>
	</div>

	<div class="bg-secondary rounded-xl p-6">
	<h3 class="text-xl font-bold text-white mb-4">Documentation</h3>
	<div id="docs-output" class="bg-slate-800 rounded-lg p-4 min-h-[300px]">
	<p class="text-slate-500 text-center py-12">Documentation will appear here...</p>
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="text-center p-6 bg-secondary border-t border-slate-800 mt-8">
	<p class="text-slate-500 text-sm">
	Developed by
	<a href="https://github.com/google/labs-prototyping-platforms" target="_blank" rel="noopener noreferrer" class="font-semibold text-cyan-400 hover:text-cyan-300 transition-colors">
	alkawthar
	</a>.
	Powered by the Gemini API.
	</p>
	</footer>
	</div>

	<script>
	// DOM Elements
	const modeButtons = document.querySelectorAll('.mode-btn');
	const views = {
	'home': document.getElementById('home-view'),
	'thar-agent': document.getElementById('thar-agent-view'),
	'design': document.getElementById('design-view'),
	'generate': document.getElementById('generate-view'),
	'review': document.getElementById('review-view'),
	'fix': document.getElementById('fix-view'),
	'tests': document.getElementById('tests-view'),
	'devops': document.getElementById('devops-view'),
	'data': document.getElementById('data-view'),
	'research': document.getElementById('research-view'),
	'security': document.getElementById('security-view'),
	'docs': document.getElementById('docs-view')
	};

	// Set initial active mode
	let currentMode = 'home';
	updateActiveMode();

	// Mode switching
	modeButtons.forEach(button => {
	button.addEventListener('click', () => {
	const mode = button.getAttribute('data-mode');
	switchMode(mode);
	});
	});

	// Mode switching function
	function switchMode(mode) {
	if (mode === currentMode) return;

	// Hide current view
	if (views[currentMode]) {
	views[currentMode].classList.add('hidden');
	}

	// Show new view
	if (views[mode]) {
	views[mode].classList.remove('hidden');
	views[mode].classList.add('animate-fade-in');
	}

	currentMode = mode;
	updateActiveMode();
	}

	// Update active mode button
	function updateActiveMode() {
	modeButtons.forEach(button => {
	const mode = button.getAttribute('data-mode');
	if (mode === currentMode) {
	button.classList.add('active');
	} else {
	button.classList.remove('active');
	}
	});
	}

	// Simulate API calls with timeouts
	document.getElementById('run-thar-agent').addEventListener('click', function() {
	const status = document.getElementById('thar-agent-status');
	const statusText = document.getElementById('thar-agent-status-text');
	const output = document.getElementById('thar-agent-output');

	status.className = 'status-indicator status-loading';
	statusText.textContent = 'Processing...';
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Analyzing your request...</p>';

	setTimeout(() => {
	status.className = 'status-indicator status-success';
	statusText.textContent = 'Completed';
	output.innerHTML = `
	<div class="text-white">
	<h3 class="text-xl font-bold mb-2">System Design for E-commerce Platform</h3>
	<p class="mb-4">Here's a comprehensive design for your e-commerce platform:</p>
	<ul class="list-disc pl-5 mb-4">
	<li>Microservices architecture with separate services for user management, product catalog, order processing, and payment handling</li>
	<li>API Gateway for routing and authentication</li>
	<li>Database design with PostgreSQL for transactional data and Redis for caching</li>
	<li>Frontend built with React and Redux for state management</li>
	<li>Deployment using Docker containers orchestrated with Kubernetes</li>
	</ul>
	<p>Would you like me to elaborate on any specific component?</p>
	</div>
	`;
	}, 2000);
	});

	// Simulate other API calls
	document.getElementById('run-design').addEventListener('click', function() {
	const output = document.getElementById('design-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Generating design...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<div class="text-white">
	<h3 class="text-xl font-bold mb-2">System Design for E-commerce Platform</h3>
	<p class="mb-4">Architecture Overview:</p>
	<ul class="list-disc pl-5 mb-4">
	<li>Microservices architecture with separate services for user management, product catalog, order processing, and payment handling</li>
	<li>API Gateway for routing and authentication</li>
	<li>Database design with PostgreSQL for transactional data and Redis for caching</li>
	<li>Frontend built with React and Redux for state management</li>
	<li>Deployment using Docker containers orchestrated with Kubernetes</li>
	</ul>
	</div>
	`;
	}, 1500);
	});

	document.getElementById('run-generate').addEventListener('click', function() {
	const output = document.getElementById('generate-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Generating code...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<pre class="text-white">
	def fibonacci(n):
	"""Generate Fibonacci sequence up to n terms"""
	if n <= 0:
	return []
	elif n == 1:
	return [0]
	elif n == 2:
	return [0, 1]

	sequence = [0, 1]
	for i in range(2, n):
	sequence.append(sequence[i-1] + sequence[i-2])
	return sequence

	# Example usage
	print(fibonacci(10)) # [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
	</pre>
	`;
	}, 1500);
	});

	document.getElementById('run-review').addEventListener('click', function() {
	const output = document.getElementById('review-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Reviewing code...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<div class="text-white">
	<h3 class="text-xl font-bold mb-2">Code Review Results</h3>
	<p class="mb-4"><strong>Overall Rating: B+</strong></p>
	<p class="mb-2">This code is generally well-structured and follows good practices. Here are some suggestions:</p>
	<ul class="list-disc pl-5 mb-4">
	<li>Add docstrings to functions for better documentation</li>
	<li>Consider adding type hints for better code clarity</li>
	<li>Add error handling for edge cases (e.g., negative numbers)</li>
	<li>Consider adding unit tests to validate the implementation</li>
	</ul>
	<p>Good job on handling the base cases correctly!</p>
	</div>
	`;
	}, 1500);
	});

	document.getElementById('run-fix').addEventListener('click', function() {
	const output = document.getElementById('fix-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Fixing code...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<pre class="text-white">
	def calculate_area(radius):
	"""Calculate the area of a circle given its radius"""
	import math
	if radius < 0:
	raise ValueError("Radius cannot be negative")
	return math.pi * radius ** 2

	# Example usage
	try:
	print(calculate_area(5)) # 78.53981633974483
	print(calculate_area(-3)) # Will raise ValueError
	except ValueError as e:
	print(f"Error: {e}")
	</pre>
	`;
	}, 1500);
	});

	document.getElementById('run-tests').addEventListener('click', function() {
	const output = document.getElementById('test-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Generating tests...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<pre class="text-white">
	import unittest

	def calculate_area(radius):
	import math
	return math.pi * radius ** 2

	class TestCalculateArea(unittest.TestCase):
	def test_positive_radius(self):
	self.assertAlmostEqual(calculate_area(1), 3.14159, places=5)
	self.assertAlmostEqual(calculate_area(2), 12.56637, places=5)

	def test_zero_radius(self):
	self.assertEqual(calculate_area(0), 0)

	def test_negative_radius(self):
	with self.assertRaises(ValueError):
	calculate_area(-1)

	if __name__ == '__main__':
	unittest.main()
	</pre>
	`;
	}, 1500);
	});

	document.getElementById('run-devops').addEventListener('click', function() {
	const output = document.getElementById('devops-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Generating DevOps configuration...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<pre class="text-white">
	# Dockerfile
	FROM python:3.9-slim
	WORKDIR /app
	COPY requirements.txt .
	RUN pip install -r requirements.txt
	COPY . .
	CMD ["python", "app.py"]

	# docker-compose.yml
	version: '3.8'
	services:
	web:
	build: .
	ports:
	- "8000:8000"
	environment:
	- FLASK_ENV=development
	volumes:
	- .:/app
	depends_on:
	- db

	db:
	image: postgres:13
	environment:
	POSTGRES_DB: myapp
	POSTGRES_USER: user
	POSTGRES_PASSWORD: password
	volumes:
	- db_data:/var/lib/postgresql/data

	volumes:
	db_data:
	</pre>
	`;
	}, 1500);
	});

	document.getElementById('run-data').addEventListener('click', function() {
	const output = document.getElementById('data-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Generating data script...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<pre class="text-white">
	import pandas as pd
	import matplotlib.pyplot as plt

	# Load data
	df = pd.read_csv('data.csv')

	# Basic statistics
	print(df.describe())

	# Visualization
	plt.figure(figsize=(10, 6))
	plt.plot(df['date'], df['value'])
	plt.title('Value Over Time')
	plt.xlabel('Date')
	plt.ylabel('Value')
	plt.show()

	# Correlation matrix
	correlation_matrix = df.corr()
	print(correlation_matrix)
	</pre>
	`;
	}, 1500);
	});

	document.getElementById('run-research').addEventListener('click', function() {
	const output = document.getElementById('research-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Researching topic...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<div class="text-white">
	<h3 class="text-xl font-bold mb-2">Research: Machine Learning in Healthcare</h3>
	<p class="mb-4"><strong>Summary:</strong></p>
	<p class="mb-4">Machine learning (ML) is revolutionizing healthcare by enabling early disease detection, personalized treatment plans, and improved patient outcomes. Key applications include:</p>
	<ul class="list-disc pl-5 mb-4">
	<li>Medical imaging analysis for cancer detection</li>
	<li>Predictive analytics for patient risk stratification</li>
	<li>Drug discovery and development acceleration</li>
	<li>Personalized treatment recommendations</li>
	</ul>
	<p class="mb-4"><strong>Recent Developments:</strong></p>
	<p>Recent breakthroughs include Google's AI that can detect breast cancer with greater accuracy than radiologists, and IBM Watson's oncology platform that assists doctors in treatment decisions.</p>
	<p class="mt-4">For more information, see the recent papers on arXiv: <a href="#" class="text-cyan-400 hover:text-cyan-300">arXiv:2105.12345</a></p>
	</div>
	`;
	}, 1500);
	});

	document.getElementById('run-security').addEventListener('click', function() {
	const output = document.getElementById('security-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Scanning code...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<div class="text-white">
	<h3 class="text-xl font-bold mb-2">Security Scan Report</h3>
	<p class="mb-4"><strong>Scan Results:</strong></p>
	<ul class="list-disc pl-5 mb-4">
	<li class="text-yellow-400">Medium Risk: Hardcoded credentials detected on line 23</li>
	<li class="text-yellow-400">Medium Risk: SQL injection vulnerability in query on line 45</li>
	<li class="text-green-400">Low Risk: Unused import statement on line 5</li>
	<li class="text-green-400">Low Risk: Insecure random number generation on line 32</li>
	</ul>
	<p class="mb-4"><strong>Recommendations:</strong></p>
	<ul class="list-disc pl-5 mb-4">
	<li>Store credentials in environment variables or secure vaults</li>
	<li>Use parameterized queries to prevent SQL injection</li>
	<li>Remove unused imports to reduce attack surface</li>
	<li>Use cryptographically secure random number generators</li>
	</ul>
	</div>
	`;
	}, 1500);
	});

	document.getElementById('run-docs').addEventListener('click', function() {
	const output = document.getElementById('docs-output');
	output.innerHTML = '<p class="text-slate-400 text-center py-12">Generating documentation...</p>';

	setTimeout(() => {
	output.innerHTML = `
	<div class="text-white">
	<h3 class="text-xl font-bold mb-2">calculate_area(radius)</h3>
	<p class="mb-4"><strong>Description:</strong> Calculate the area of a circle given its radius.</p>
	<p class="mb-2"><strong>Parameters:</strong></p>
	<ul class="list-disc pl-5 mb-4">
	<li>radius (float): The radius of the circle. Must be a non-negative number.</li>
	</ul>
	<p class="mb-2"><strong>Returns:</strong></p>
	<ul class="list-disc pl-5 mb-4">
	<li>float: The area of the circle calculated using the formula π * radius².</li>
	</ul>
	<p class="mb-2"><strong>Raises:</strong></p>
	<ul class="list-disc pl-5 mb-4">
	<li>ValueError: If the radius is negative.</li>
	</ul>
	<p class="mb-2"><strong>Example:</strong></p>
	<pre class="bg-slate-700 p-4 rounded">
	import math

	def calculate_area(radius):
	if radius < 0:
	raise ValueError("Radius cannot be negative")
	return math.pi * radius ** 2
	</pre>
	</div>
	`;
	}, 1500);
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kausar12/codethar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>