Upload 14 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,200 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React, { useState, useEffect, useCallback } from 'react';
+import ControlPanel from './components/ControlPanel';
+import ResumePreview from './components/ResumePreview';
+import JobMatchDashboard from './components/JobMatchDashboard';
+import LoadingSpinner from './components/LoadingSpinner';
+import type { InitialInput, ResumeDocument, ResumeSectionType, ScoreResponse, ActiveEditor } from './lib/types';
+
+// Custom hook for debouncing
+const useDebounce = (callback: (...args: any[]) => void, delay: number) => {
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  return useCallback((...args: any[]) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    const newTimeoutId = setTimeout(() => {
+      callback(...args);
+    }, delay);
+    setTimeoutId(newTimeoutId);
+  }, [callback, delay, timeoutId]);
+};
+
+export default function App() {
+  const [jobDescription, setJobDescription] = useState<string>('');
+  const [resumeDocument, setResumeDocument] = useState<ResumeDocument>([]);
+  const [activeEditor, setActiveEditor] = useState<ActiveEditor | null>(null);
+  const [scoreData, setScoreData] = useState<ScoreResponse>({ score: 0, suggestions: [] });
+  
+  const [isGenerating, setIsGenerating] = useState(false); // For initial generation
+  const [isScoring, setIsScoring] = useState(false);       // For real-time scoring
+  const [isRefining, setIsRefining] = useState(false);     // For co-pilot actions
+  const [error, setError] = useState<string | null>(null);
+  
+  const parseFullResumeText = (fullText: string): ResumeDocument => {
+    const sections: ResumeDocument = [];
+    const sectionTitles: ResumeSectionType[] = ["Professional Summary", "Skills Section", "Experience", "Education"];
+    const sectionRegex = new RegExp(`##\\s*(${sectionTitles.join('|')})\\s*([\\s\\S]*?)(?=\\n##\\s*(?:${sectionTitles.join('|')})|$)`, 'g');
+    
+    let match;
+    while ((match = sectionRegex.exec(fullText)) !== null) {
+      const title = match[1].trim() as ResumeSectionType;
+      const content = match[2].trim();
+      sections.push({ id: title, title, content });
+    }
+    return sections;
+  };
+
+  const handleInitialGenerate = async (input: InitialInput) => {
+    setIsGenerating(true);
+    setError(null);
+    setJobDescription(input.jobDescription || '');
+    setResumeDocument([]);
+    setScoreData({ score: 0, suggestions: [] });
+
+    try {
+      const response = await fetch('http://127.0.0.1:5000/api/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(input),
+      });
+
+      if (!response.ok) throw new Error((await response.json()).error || 'Server error');
+      const data = await response.json();
+      const parsedSections = parseFullResumeText(data.resume);
+      setResumeDocument(parsedSections);
+    } catch (err) {
+      handleFetchError(err, "Could not generate resume.");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const debouncedScoreRequest = useDebounce(async (doc: ResumeDocument, jd: string) => {
+    if (!jd || doc.length === 0) return;
+    setIsScoring(true);
+    try {
+      const fullText = doc.map(s => `## ${s.title}\n${s.content}`).join('\n\n');
+      const response = await fetch('http://127.0.0.1:5000/api/score', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ resume: fullText, job_description: jd }),
+      });
+      if (!response.ok) return; // Fail silently on scoring
+      const data: ScoreResponse = await response.json();
+      setScoreData(data);
+    } catch (err) {
+      // Don't show scoring errors to user to avoid being noisy
+      console.error("Scoring error:", err);
+    } finally {
+      setIsScoring(false);
+    }
+  }, 1500); // 1.5-second debounce delay
+
+  useEffect(() => {
+    if (resumeDocument.length > 0 && jobDescription) {
+      debouncedScoreRequest(resumeDocument, jobDescription);
+    }
+  }, [resumeDocument, jobDescription, debouncedScoreRequest]);
+
+  const handleContentUpdate = (sectionId: ResumeSectionType, newContent: string) => {
+    setResumeDocument(prevDoc =>
+      prevDoc.map(section =>
+        section.id === sectionId ? { ...section, content: newContent } : section
+      )
+    );
+  };
+  
+  const handleRefineSection = async (instruction: string) => {
+      if (!activeEditor) return;
+      setIsRefining(true);
+      setError(null);
+      try {
+          const response = await fetch('http://127.0.0.1:5000/api/refine_section', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                  text_to_refine: activeEditor.content,
+                  instruction: instruction
+              }),
+          });
+          if (!response.ok) throw new Error((await response.json()).error || 'Server error during refinement.');
+          const data = await response.json();
+          handleContentUpdate(activeEditor.sectionId, data.refined_text);
+      } catch (err) {
+          handleFetchError(err, "Could not refine section.");
+      } finally {
+          setIsRefining(false);
+      }
+  };
+
+  const handleFetchError = (err: any, context: string) => {
+    let message = err instanceof Error ? err.message : "An unknown error occurred.";
+    if (message.includes('Failed to fetch')) {
+      message = "Could not connect to the backend server. Is it running? Please start the Python server and try again.";
+    }
+    setError(`${context} ${message}`);
+  };
+
+  const clearAll = () => {
+    setJobDescription('');
+    setResumeDocument([]);
+    setActiveEditor(null);
+    setScoreData({ score: 0, suggestions: [] });
+    setError(null);
+  };
+
+  return (
+    <div className="app-container">
+      <header className="app-header">
+        <h1>AI Resume Studio</h1>
+        <p>Your intelligent co-pilot for crafting the perfect resume.</p>
+      </header>
+
+      {isGenerating && <div className="global-loading-overlay"><LoadingSpinner /></div>}
+      
+      {error && <div className="error-message global-error">{error}</div>}
+
+      <div className="app-content-grid">
+        <aside className="control-column">
+          <ControlPanel
+            onGenerate={handleInitialGenerate}
+            onClear={clearAll}
+            activeEditor={activeEditor}
+            onRefine={handleRefineSection}
+            isGenerating={isGenerating}
+            isRefining={isRefining}
+          />
+        </aside>
+        
+        <main className="resume-column">
+          {resumeDocument.length > 0 ? (
+            <ResumePreview 
+              document={resumeDocument}
+              onContentChange={handleContentUpdate}
+              activeSectionId={activeEditor?.sectionId}
+              onSectionFocus={setActiveEditor}
+            />
+          ) : (
+             <div className="placeholder-text">
+                <p>Your AI-crafted resume will appear here. Fill in the "Initial Setup" form and click "Generate" to begin!</p>
+            </div>
+          )}
+        </main>
+        
+        <aside className="dashboard-column">
+          <JobMatchDashboard
+            score={scoreData.score}
+            suggestions={scoreData.suggestions}
+            isLoading={isScoring}
+            hasContent={resumeDocument.length > 0 && jobDescription.length > 0}
+          />
+        </aside>
+      </div>
+    </div>
+  );
+}

README.md

@@ -1,12 +1,80 @@
+# Interactive AI Resume Studio
+
+Welcome to the Interactive AI Resume Studio, a professional-grade, full-stack application designed to act as your co-pilot in crafting the perfect resume with the power of Google's Gemini AI.
+
+This application goes beyond simple generation. It's a live, collaborative environment that provides real-time feedback and powerful AI tools to help you tailor your resume to any job description.
+
+## Features
+- **Live Editable Document:** No more separate forms and previews. The resume is your workspace. Click and type directly on the document.
+- **Real-Time Job Match Scoring:** As you edit, a "Job Match" score instantly updates, showing you how well your resume aligns with the target job description.
+- **Actionable AI Insights:** Receive a running list of concrete suggestions from the AI, such as keywords to add or achievements to quantify.
+- **AI Co-pilot Panel:** Select any section of your resume to get contextual actions like "Rewrite," "Make More Concise," or "Generate Alternative Bullet Points."
+- **Secure and Powerful Backend:** A Python Flask server handles all AI logic, keeping your API key safe and enabling advanced analysis that would be impossible in the browser alone.
+
 ---
-title: Ai Resume Builder
-emoji: 🐢
-colorFrom: green
-colorTo: pink
-sdk: gradio
-sdk_version: 5.34.2
-app_file: app.py
-pinned: false
+
+## 🚀 Getting Started
+
+Follow these steps to get the application running on your local machine.
+
+### Prerequisites
+
+- [Python 3.8+](https://www.python.org/downloads/)
+- [Node.js](https://nodejs.org/en/) (for potential future frontend build steps)
+- A Google Gemini API Key. You can get one from [Google AI Studio](https://aistudio.google.com/app/apikey).
+
+### 1. Backend Setup (Python)
+
+The backend server is the "brain" of the application.
+
+**a. Create a Secure Environment File:**
+
+Create a new file named `.env` in the root of the project directory. This file will hold your secret API key. Copy the contents of `.env.example` into it.
+
+**`.env` file:**
+```
+API_KEY="YOUR_GEMINI_API_KEY_HERE"
+```
+Replace `YOUR_GEMINI_API_KEY_HERE` with your actual key.
+
+**b. Install Python Dependencies:**
+
+Open your terminal in the project's root directory and run the following command to install the required Python libraries.
+
+```bash
+pip install -r requirements.txt
+```
+
+**c. Run the Backend Server:**
+
+Start the Python server with this command:
+
+```bash
+python main.py
+```
+
+You should see output indicating that the Flask server is running on `http://127.0.0.1:5000`. **Keep this terminal window open.**
+
+### 2. Frontend Setup (Browser)
+
+The frontend is a simple HTML file that uses React via an import map.
+
+**a. Open `index.html` in Your Browser:**
+
+The easiest way to do this is with a live server extension in your code editor (like "Live Server" in VS Code). This handles CORS issues automatically. Using a live server is **highly recommended.**
+
+### 3. Use the Application!
+
+With the backend server running and the frontend open in your browser, you can now use the AI Resume Studio. 
+1.  Fill out the "Initial Setup" form.
+2.  Click "Generate Full Resume."
+3.  Once the resume appears, click into any section to start editing. Watch the dashboard on the right update in real-time!
+4.  Use the "AI Co-pilot" tab on the left to refine your sections.
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## API Endpoints
+
+- `POST /api/generate`: Takes initial user data and generates a full resume.
+- `POST /api/score`: Takes the current resume text and a job description and returns a `{ score, suggestions }` JSON object.
+- `POST /api/refine_section`: Takes a piece of text and an instruction (e.g., "make it more concise") and returns the refined text.

index.css

@@ -0,0 +1,496 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+
+/* Reset and Global Styles */
+:root {
+  --font-primary: 'Lato', sans-serif;
+  --font-headings: 'Playfair Display', serif;
+
+  --color-background: #F4F7FC; /* Lighter, more modern background */
+  --color-surface: #FFFFFF;
+  --color-primary-text: #121826; /* Darker for better contrast */
+  --color-secondary-text: #5A6475; 
+  --color-accent: #4A6CFF; /* A more modern, vibrant blue accent */
+  --color-accent-dark: #3550D5;
+  --color-accent-light: #E9EDFF; /* Very light for backgrounds */
+  --color-accent-light-translucent: rgba(74, 108, 255, 0.1);
+  --color-border: #E1E6EF;
+  --color-input-bg: #FFFFFF;
+  --color-error: #D93025; 
+  --color-error-bg: #FDF0EF;
+  --color-success: #1E8E3E;
+  --color-warning: #F9AB00;
+
+  --border-radius-sm: 6px; 
+  --border-radius-md: 10px;
+  --box-shadow-light: 0 2px 4px rgba(18, 24, 38, 0.05);
+  --box-shadow-md: 0 4px 12px rgba(18, 24, 38, 0.08);
+  --box-shadow-focus: 0 0 0 3px rgba(74, 108, 255, 0.25);
+  --transition-speed: 0.25s ease-in-out;
+  --transition-speed-fast: 0.15s ease-in-out;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: var(--font-primary);
+  background-color: var(--color-background);
+  color: var(--color-primary-text);
+  line-height: 1.6;
+}
+
+#root {
+  width: 100%;
+}
+
+/* App Container & Main Layout */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-header {
+  color: white;
+  padding: 1.5rem 2rem; 
+  text-align: left;
+  background: linear-gradient(135deg, #1e3a5f, #2b5797);
+  box-shadow: var(--box-shadow-md);
+  z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.app-header h1 {
+  font-family: var(--font-headings);
+  font-size: 1.75rem;
+  letter-spacing: 1px;
+}
+
+.app-header p {
+  font-size: 0.9rem;
+  opacity: 0.9;
+  font-weight: 300;
+}
+
+/* New 3-Column Grid */
+.app-content-grid {
+  display: grid;
+  grid-template-columns: minmax(350px, 1.2fr) 2fr minmax(320px, 1fr);
+  gap: 1.5rem; 
+  padding: 1.5rem; 
+  flex-grow: 1;
+  height: calc(100vh - 80px); /* Adjust based on header height */
+  overflow: hidden;
+}
+
+.control-column, .resume-column, .dashboard-column {
+  overflow-y: auto;
+  height: 100%;
+  padding-right: 10px; /* For scrollbar */
+}
+
+/* Custom Scrollbar */
+.control-column::-webkit-scrollbar,
+.resume-column::-webkit-scrollbar,
+.dashboard-column::-webkit-scrollbar {
+  width: 8px;
+}
+.control-column::-webkit-scrollbar-track,
+.resume-column::-webkit-scrollbar-track,
+.dashboard-column::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+.control-column::-webkit-scrollbar-thumb,
+.resume-column::-webkit-scrollbar-thumb,
+.dashboard-column::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+.control-column::-webkit-scrollbar-thumb:hover,
+.resume-column::-webkit-scrollbar-thumb:hover,
+.dashboard-column::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}
+
+
+/* Control Panel (Left Column) */
+.control-panel {
+  background-color: var(--color-surface);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--box-shadow-light);
+  padding: 1rem;
+}
+
+.control-panel-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 1.5rem;
+}
+.control-panel-tab {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  border: none;
+  background: none;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-secondary-text);
+  position: relative;
+  transition: color var(--transition-speed-fast);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.control-panel-tab::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: var(--color-accent);
+  transform: scaleX(0);
+  transition: transform var(--transition-speed);
+}
+.control-panel-tab.active {
+  color: var(--color-accent);
+}
+.control-panel-tab.active::after {
+  transform: scaleX(1);
+}
+.control-panel-tab:disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+.tab-content {
+  animation: fadeIn 0.3s ease;
+}
+
+/* Initial Input Form */
+.initial-input-form h2 {
+  font-family: var(--font-headings);
+  font-size: 1.5rem;
+  color: var(--color-primary-text);
+  margin-bottom: 1.5rem; 
+  padding-bottom: 0.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  font-weight: 600; 
+  margin-bottom: 0.5rem;
+  color: var(--color-secondary-text);
+  font-size: 0.9rem;
+  display: block;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem 1rem; 
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-sm);
+  font-size: 0.95rem;
+  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: var(--box-shadow-focus);
+}
+.form-group textarea {
+  resize: vertical;
+  min-height: 70px;
+}
+.form-group input[type="file"] {
+  padding: 0.5rem;
+  font-size: 0.9rem;
+}
+.form-text.text-muted {
+  font-size: 0.8rem;
+  color: #6c757d;
+  margin-top: 0.25rem;
+}
+
+/* AI Co-pilot Panel */
+.ai-copilot-panel h3 {
+  font-family: var(--font-headings);
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+}
+.copilot-placeholder {
+  font-style: italic;
+  color: var(--color-secondary-text);
+  text-align: center;
+  padding: 2rem 1rem;
+  border: 2px dashed var(--color-border);
+  border-radius: var(--border-radius-sm);
+}
+.copilot-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Resume Preview (Center Column) - Digital Paper */
+.resume-preview-paper {
+  background-color: var(--color-surface);
+  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
+  padding: 2.5rem 3rem; /* Generous padding like a real doc */
+  border-radius: 3px;
+  min-height: 100%;
+  outline: none; /* remove focus ring from main container */
+}
+
+/* Editable Section */
+.editable-section {
+  padding: 0.5rem 0;
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+.editable-section:focus-within {
+  background-color: var(--color-accent-light-translucent);
+  border-radius: var(--border-radius-sm);
+}
+.editable-section.active {
+  background-color: var(--color-accent-light-translucent);
+  box-shadow: inset 3px 0 0 var(--color-accent); /* Left border highlight */
+  padding-left: 10px;
+  margin-left: -10px;
+}
+
+.section-title {
+  font-family: var(--font-headings);
+  font-size: 1.5rem; 
+  color: var(--color-primary-text); 
+  font-weight: 700;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--color-primary-text);
+}
+.section-content {
+  font-size: 1rem;
+  color: var(--color-secondary-text); 
+  line-height: 1.7; 
+  white-space: pre-wrap; /* Preserve whitespace and newlines */
+  outline: none; /* No focus outline on the content itself */
+  min-height: 30px; /* ensure there's a clickable area */
+}
+.section-content:focus {
+  box-shadow: none; /* ensure no weird focus effects */
+}
+.section-content[contenteditable="true"]::before {
+  content: 'Type here or use the AI Co-pilot...';
+  color: #ccc;
+  display: none;
+  font-style: italic;
+}
+.section-content[contenteditable="true"]:empty::before {
+  display: block;
+}
+
+
+/* Job Match Dashboard (Right Column) */
+.dashboard {
+  background-color: var(--color-surface);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--box-shadow-light);
+  padding: 1.5rem;
+}
+.dashboard h2 {
+  font-family: var(--font-headings);
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Score Gauge */
+.score-gauge {
+  position: relative;
+  width: 150px;
+  height: 75px; /* Half circle */
+  overflow: hidden;
+  margin: 1rem auto;
+}
+.score-gauge-bg, .score-gauge-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  border: 20px solid;
+}
+.score-gauge-bg {
+  border-color: var(--color-border);
+}
+.score-gauge-fill {
+  clip: rect(0, 150px, 75px, 0);
+  border-color: var(--color-accent);
+  transform: rotate(var(--gauge-rotation, 0deg));
+  transition: transform 0.5s ease-out;
+}
+.score-text {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-primary-text);
+}
+.score-text span {
+  font-size: 1.2rem;
+  font-weight: 400;
+  color: var(--color-secondary-text);
+}
+
+/* AI Suggestions List */
+.suggestions-list {
+  list-style: none;
+  padding: 0;
+  margin-top: 2rem;
+}
+.suggestions-list h3 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--color-secondary-text);
+  margin-bottom: 1rem;
+  border-top: 1px solid var(--color-border);
+  padding-top: 1.5rem;
+}
+.suggestion-item {
+  background-color: var(--color-accent-light);
+  padding: 1rem;
+  border-radius: var(--border-radius-sm);
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+.suggestion-item i {
+  font-size: 1.2rem;
+  color: var(--color-accent-dark);
+  margin-top: 2px;
+}
+
+/* Buttons */
+.submit-button, .clear-button, .copilot-button {
+  width: 100%;
+  padding: 0.8rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-speed-fast);
+  text-align: center;
+  border: 1px solid transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.submit-button {
+  background-color: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+}
+.submit-button:hover:not(:disabled) {
+  background-color: var(--color-accent-dark);
+}
+.clear-button {
+  background-color: #F8F9FA;
+  color: var(--color-secondary-text);
+  border-color: var(--color-border);
+}
+.clear-button:hover:not(:disabled) {
+  background-color: #f1f3f5;
+  border-color: var(--color-secondary-text);
+}
+.copilot-button {
+  background-color: var(--color-accent-light);
+  color: var(--color-accent-dark);
+  justify-content: flex-start;
+  font-weight: 600;
+}
+.copilot-button:hover:not(:disabled) {
+  background-color: rgba(74, 108, 255, 0.2);
+  color: var(--color-accent-dark);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.submit-button.is-loading span { visibility: hidden; }
+.submit-button.is-loading::after {
+  content: "";
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { 100% { transform: rotate(360deg); } }
+
+/* Global Loading & Error */
+.global-loading-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(255,255,255,0.7);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.error-message {
+  background-color: var(--color-error-bg);
+  color: var(--color-error);
+  border: 1px solid var(--color-error);
+  padding: 1rem 1.5rem; 
+  border-radius: var(--border-radius-sm);
+  margin: 1.5rem;
+  box-shadow: var(--box-shadow-light);
+}
+
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+.placeholder-text {
+  text-align: center;
+  padding: 4rem 2rem; 
+  color: var(--color-secondary-text);
+  border: 2px dashed var(--color-border); 
+  border-radius: var(--border-radius-md);
+  display: flex;
+  flex-direction: column; 
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  min-height: 250px;
+}
+.placeholder-text::before { 
+  content: '📄'; 
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}

index.html

@@ -0,0 +1,36 @@
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>AI Resume Studio</title>
+    <meta name="description" content="Generate and refine professional resumes with a real-time AI co-pilot, job match scoring, and actionable insights." />
+    <meta name="author" content="AI Assistant" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;500;700&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react",
+    "react/": "https://esm.sh/react/",
+    "react-dom": "https://esm.sh/react-dom",
+    "react-dom/": "https://esm.sh/react-dom/",
+    "pdfjs-dist": "https://esm.sh/[email protected]",
+    "pdfjs-dist/build/pdf.worker.min.js": "https://esm.sh/[email protected]/build/pdf.worker.min.js",
+    "mammoth": "https://esm.sh/[email protected]"
+  }
+}
+</script>
+    <link rel="stylesheet" href="/index.css">
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.tsx

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount the application.");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

main.py

@@ -0,0 +1 @@
+�jh��,�jh��(�	^�z������� zv�

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "AI Resume Builder",
+  "description": "Craft a professional resume with AI-powered suggestions and guidance.",
+  "requestFramePermissions": [],
+  "prompt": ""
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "ai-resume-builder",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest",
+    "pdfjs-dist": "4.0.379",
+    "pdfjs-dist/build/pdf.worker.min.js": "latest",
+    "mammoth": "1.7.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0"
+  }
+}

requirements.txt

@@ -0,0 +1,5 @@
+
+Flask==2.2.2
+Flask-Cors==3.0.10
+google-generativeai==0.7.1
+python-dotenv==0.21.0

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*" :  ["./*"]
+    }
+  }
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});