Upload 8 files

app.py

@@ -1,11 +1,11 @@
 import os
 import httpx
 from fastapi import FastAPI, Request, HTTPException
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
+import traceback
 
 # --- Configuration ---
-# Get the API key from Hugging Face Secrets
 DEEPSEEK_API_KEY = os.getenv("DEEPSEEK_API_KEY")
 DEEPSEEK_ENDPOINT = "https://api.deepseek.com/v1/chat/completions"
 
@@ -16,24 +16,146 @@ app = FastAPI()
 client = httpx.AsyncClient()
 
 # --- Absolute Path Configuration ---
-# Get the absolute path of the directory where this file is located
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-# Define the path to the static directory
 STATIC_DIR = os.path.join(BASE_DIR, "static")
 
+# --- Helper Function for DeepSeek API Call ---
+async def call_deepseek_api(messages: list, model: str = "deepseek-chat", temperature: float = 0.7):
+    """
+    A helper function to make calls to the DeepSeek API.
+    """
+    if not DEEPSEEK_API_KEY:
+        print("[ERROR] DEEPSEEK_API_KEY is not set!")
+        raise HTTPException(
+            status_code=500, 
+            detail="DEEPSEEK_API_KEY is not set on the server."
+        )
+    
+    headers = {
+        "Content-Type": "application/json",
+        "Authorization": f"Bearer {DEEPSEEK_API_KEY}"
+    }
+    
+    body = {
+        "model": model,
+        "messages": messages,
+        "temperature": temperature,
+        "stream": False
+    }
+    
+    try:
+        response = await client.post(
+            DEEPSEEK_ENDPOINT,
+            json=body,
+            headers=headers,
+            timeout=300.0
+        )
+        response.raise_for_status()
+        data = response.json()
+        return data['choices'][0]['message']['content']
+    except httpx.HTTPStatusError as e:
+        error_msg = f"DeepSeek API Error: {e.response.status_code} - {e.response.text}"
+        print(f"[ERROR] {error_msg}")
+        raise HTTPException(
+            status_code=e.response.status_code, 
+            detail=error_msg
+        )
+    except Exception as e:
+        error_msg = f"Internal server error in API call: {type(e).__name__} - {str(e)}"
+        print(f"[ERROR] {error_msg}")
+        print(f"[TRACEBACK] {traceback.format_exc()}")
+        raise HTTPException(
+            status_code=500, 
+            detail=error_msg
+        )
 
-# --- API Endpoint ---
+# --- New AI Agent Endpoint ---
+@app.post("/generate")
+async def generate_content(request: Request):
+    """
+    This endpoint uses a two-step LLM process:
+    1. Generate a high-quality prompt based on user data.
+    2. Use that prompt to generate the final content.
+    """
+    try:
+        body = await request.json()
+        task = body.get("task")
+        data = body.get("data")
+
+        if not task or not data:
+            raise HTTPException(status_code=400, detail="Missing 'task' or 'data' in request body")
+
+        # Step 1: Generate a high-quality prompt for the main task
+        meta_system_prompt = "You are an expert prompt engineer. Your task is to create a detailed and effective 'user' prompt for another AI model, which is an expert career consultant. The generated prompt must guide the second AI to produce a comprehensive, high-quality response in the required format based on the user's raw data and task."
+        
+        meta_user_prompt = f"""
+        I have the following task and user data. Create the perfect prompt for a career consultant AI to handle this.
+
+        **Task:** '{task}'
+
+        **User's Raw Data:**
+        ```json
+        {data}
+        ```
+
+        **Instructions for the prompt you will generate:**
+        - The prompt must be self-contained and include all necessary user data.
+        - It must clearly state the desired output format. 
+        - For the 'resume' task, the format MUST be a single JSON object with two keys: "resume" and "analysis", both containing well-formed HTML.
+        - For all other tasks ('interview', 'learning_path', 'cover_letter', 'linkedin', 'salary'), the format MUST be well-formed HTML content directly.
+        - The tone of the prompt should be as if a user is asking an expert for help.
+        - Incorporate all the details from the user's data into the prompt naturally.
+        """
+
+        print(f"[INFO] Generating prompt for task: {task}")
+        generated_prompt = await call_deepseek_api(
+            messages=[
+                {"role": "system", "content": meta_system_prompt},
+                {"role": "user", "content": meta_user_prompt}
+            ],
+            temperature=0.3 # Lower temperature for more deterministic prompt generation
+        )
+        print(f"[DEBUG] Generated Prompt for 2nd LLM call:\n{generated_prompt}")
+
+        # Step 2: Use the generated prompt to get the final content
+        final_system_prompts = {
+            "resume": "You are a professional career consultant and resume expert. Please strictly follow the JSON format for the response, ensuring the HTML is well-formed and professional.",
+            "interview": "You are an experienced interviewer and career mentor. Provide practical, professional interview preparation materials in well-formed HTML.",
+            "learning_path": "You are an experienced career mentor and learning planner. Create a personalized, actionable learning path in well-formed HTML.",
+            "cover_letter": "You are an expert cover letter writer. Write a professional, persuasive, and personalized cover letter in well-formed HTML.",
+            "linkedin": "You are a LinkedIn optimization expert. Create a professional and attractive LinkedIn profile optimization plan in well-formed HTML.",
+            "salary": "You are a salary negotiation expert and market analyst. Provide an accurate, practical salary analysis and negotiation advice in well-formed HTML."
+        }
+        final_system_prompt = final_system_prompts.get(task, "You are a helpful AI career assistant.")
+
+        print(f"[INFO] Generating final content for task: {task}")
+        final_content = await call_deepseek_api(
+            messages=[
+                {"role": "system", "content": final_system_prompt},
+                {"role": "user", "content": generated_prompt}
+            ]
+        )
+
+        return JSONResponse(content={"content": final_content})
+
+    except Exception as e:
+        error_msg = f"Error in /generate endpoint: {type(e).__name__} - {str(e)}"
+        print(f"[ERROR] {error_msg}")
+        print(f"[TRACEBACK] {traceback.format_exc()}")
+        raise HTTPException(
+            status_code=500, 
+            detail=error_msg
+        )
+
+
+# --- Original API Endpoint (Proxy) ---
 @app.post("/call-deepseek")
 async def proxy_deepseek(request: Request):
     """
     This endpoint receives the request from our frontend (index.html),
     adds the secret API key, and forwards it to the DeepSeek API.
+    This is the original proxy endpoint and will be replaced by the /generate endpoint logic.
     """
-    # Check if the API key is configured in HF Secrets
-    print(f"[DEBUG] DEEPSEEK_API_KEY exists: {bool(DEEPSEEK_API_KEY)}")
-    if DEEPSEEK_API_KEY:
-        print(f"[DEBUG] API Key starts with: {DEEPSEEK_API_KEY[:10]}...")
-    
     if not DEEPSEEK_API_KEY:
         print("[ERROR] DEEPSEEK_API_KEY is not set!")
         raise HTTPException(
@@ -42,31 +164,23 @@ async def proxy_deepseek(request: Request):
         )
         
     try:
-        # Get the original JSON body from the frontend
         body = await request.json()
-
-        # Prepare the authorization headers for DeepSeek
         headers = {
             "Content-Type": "application/json",
             "Authorization": f"Bearer {DEEPSEEK_API_KEY}"
         }
         
-        # Make the asynchronous request to DeepSeek
         response = await client.post(
             DEEPSEEK_ENDPOINT,
-            json=body,      # Forward the body from the frontend
+            json=body,
             headers=headers,
-            timeout=300.0    # Set a 300-second timeout (5 minutes)
+            timeout=300.0
         )
         
-        # Check if DeepSeek returned an error
         response.raise_for_status()
-        
-        # Return DeepSeek's successful response directly to the frontend
         return response.json()
 
     except httpx.HTTPStatusError as e:
-        # Handle errors from the DeepSeek API
         error_msg = f"DeepSeek API Error: {e.response.status_code} - {e.response.text}"
         print(f"[ERROR] {error_msg}")
         raise HTTPException(
@@ -74,20 +188,15 @@ async def proxy_deepseek(request: Request):
             detail=error_msg
         )
     except Exception as e:
-        # Handle any other unexpected errors
         error_msg = f"Internal server error: {type(e).__name__} - {str(e)}"
         print(f"[ERROR] {error_msg}")
-        import traceback
         print(f"[TRACEBACK] {traceback.format_exc()}")
         raise HTTPException(
             status_code=500, 
             detail=error_msg
         )
 
-
 # --- Static File Serving ---
-# Mount the 'static' directory to serve index.html and other assets
-# Use the absolute path to be safe
 app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
 
 @app.get("/")
@@ -96,11 +205,10 @@ async def read_root():
     Serves the main index.html file from the 'static' directory.
     """
     try:
-        # Use the absolute path to be safe
         with open(os.path.join(STATIC_DIR, "index.html")) as f:
             return HTMLResponse(content=f.read(), status_code=200)
     except FileNotFoundError:
         return HTMLResponse(
-            content="<h1>Error: index.html not found</h1><p>Ensure index.html is in a 'static' folder.</p>", 
+            content="<h1>Error: index.html not found</h1><p>Ensure index.html is in a 'static' folder.", 
             status_code=404
-        )
+        )

static/index.html

@@ -522,102 +522,6 @@
     </div>
 
     <script>
-        // Career Database - Real data for all functionalities
-        const careerDatabase = {
-            skillsRoadmaps: {
-                'AI Engineer': {
-                    foundation: ['Python Programming', 'Linear Algebra', 'Statistics & Probability', 'Data Structures'],
-                    intermediate: ['Machine Learning Fundamentals', 'Deep Learning', 'Data Preprocessing', 'Model Evaluation'],
-                    advanced: ['Neural Networks', 'Natural Language Processing', 'Computer Vision', 'Reinforcement Learning'],
-                    tools: ['TensorFlow', 'PyTorch', 'scikit-learn', 'Keras', 'OpenCV'],
-                    projects: ['Sentiment Analysis Model', 'Image Classification System', 'Recommendation Engine']
-                },
-                'Full Stack Developer': {
-                    foundation: ['HTML/CSS/JavaScript', 'Git Version Control', 'Basic Algorithms', 'Responsive Design'],
-                    intermediate: ['React/Vue.js', 'Node.js/Express', 'Database Design', 'RESTful APIs'],
-                    advanced: ['System Design', 'DevOps & CI/CD', 'Cloud Services (AWS/Azure)', 'Microservices'],
-                    tools: ['Docker', 'MongoDB/PostgreSQL', 'AWS Services', 'Jenkins'],
-                    projects: ['E-commerce Platform', 'Social Media App', 'Real-time Chat Application']
-                },
-                'Data Scientist': {
-                    foundation: ['Python/R Programming', 'SQL Databases', 'Statistics', 'Data Visualization'],
-                    intermediate: ['Machine Learning', 'Experimental Design', 'Feature Engineering', 'Data Wrangling'],
-                    advanced: ['Big Data Technologies', 'Advanced ML Models', 'Business Intelligence', 'MLOps'],
-                    tools: ['Pandas/NumPy', 'Tableau/PowerBI', 'Apache Spark', 'Jupyter Notebooks'],
-                    projects: ['Predictive Analytics Model', 'Customer Segmentation', 'Sales Forecasting']
-                },
-                'Product Manager': {
-                    foundation: ['Market Research', 'User Stories', 'Agile Methodology', 'Basic Analytics'],
-                    intermediate: ['Product Strategy', 'Roadmap Planning', 'Stakeholder Management', 'A/B Testing'],
-                    advanced: ['Go-to-Market Strategy', 'Product Metrics', 'Team Leadership', 'Business Case Development'],
-                    tools: ['Jira/Asana', 'Figma', 'Google Analytics', 'SQL for PMs'],
-                    projects: ['Product Launch Plan', 'Feature Prioritization Framework', 'User Research Report']
-                }
-            },
-
-            interviewQuestions: {
-                technical: {
-                    entry: [
-                        "Explain the difference between let, const, and var in JavaScript",
-                        "What is a REST API and how does it work?",
-                        "Describe your experience with version control systems like Git",
-                        "How would you approach debugging a software issue?"
-                    ],
-                    mid: [
-                        "Explain system design principles for a scalable application",
-                        "How do you ensure code quality and maintainability?",
-                        "Describe your experience with database optimization",
-                        "What's your approach to testing and test-driven development?"
-                    ],
-                    senior: [
-                        "Design a system that handles 1 million concurrent users",
-                        "How do you mentor junior developers and improve team processes?",
-                        "Explain your strategy for technical debt management",
-                        "Describe a complex technical challenge you solved and your approach"
-                    ],
-                    lead: [
-                        "How do you align technical strategy with business goals?",
-                        "Describe your experience building and leading engineering teams",
-                        "What's your approach to incident management and post-mortems?",
-                        "How do you handle technical disagreements within your team?"
-                    ]
-                },
-                behavioral: [
-                    "Tell me about a time you faced a significant challenge and how you overcame it",
-                    "Describe a situation where you had to work with a difficult team member",
-                    "How do you handle tight deadlines and competing priorities?",
-                    "Share an example of a project failure and what you learned from it"
-                ]
-            },
-
-            salaryData: {
-                'Software Engineer': { base: 120000, bonus: 0.15, equity: 0.10 },
-                'Senior Software Engineer': { base: 150000, bonus: 0.20, equity: 0.15 },
-                'Data Scientist': { base: 130000, bonus: 0.15, equity: 0.12 },
-                'AI Engineer': { base: 160000, bonus: 0.20, equity: 0.18 },
-                'Product Manager': { base: 140000, bonus: 0.25, equity: 0.15 },
-                'Full Stack Developer': { base: 125000, bonus: 0.15, equity: 0.10 }
-            },
-
-            locationMultipliers: {
-                'San Francisco, CA': 1.4,
-                'New York, NY': 1.35,
-                'Seattle, WA': 1.25,
-                'Boston, MA': 1.2,
-                'Austin, TX': 1.1,
-                'Remote': 0.95,
-                'Default': 1.0
-            },
-
-            companyMultipliers: {
-                'startup': { base: 0.9, equity: 2.0 },
-                'small': { base: 1.0, equity: 1.5 },
-                'medium': { base: 1.1, equity: 1.2 },
-                'large': { base: 1.2, equity: 1.0 },
-                'enterprise': { base: 1.3, equity: 0.8 }
-            }
-        };
-
         // Tab navigation
         function openTab(tabName) {
             const tabContents = document.getElementsByClassName('tab-content');
@@ -632,456 +536,133 @@
             event.currentTarget.classList.add('active');
         }
 
-        // 1. RESUME OPTIMIZER - ACTUAL FUNCTIONALITY
+        // 1. RESUME OPTIMIZER
         async function generateResume() {
-            const name = document.getElementById('name').value || 'Your Name';
-            const currentRole = document.getElementById('current-role').value || 'Professional';
-            const experience = document.getElementById('experience').value || '3';
-            const skills = document.getElementById('skills').value || 'Various skills';
-            const jobTitle = document.getElementById('job-title').value || 'Target Role';
-            const company = document.getElementById('company-name').value || 'Target Company';
-            const jobDescription = document.getElementById('job-description').value;
-
-            // Show loading state
+            const resumeData = {
+                name: document.getElementById('name').value || 'Your Name',
+                currentRole: document.getElementById('current-role').value || 'Professional',
+                experience: document.getElementById('experience').value || '3',
+                skills: document.getElementById('skills').value || 'Various skills',
+                jobTitle: document.getElementById('job-title').value || 'Target Role',
+                company: document.getElementById('company-name').value || 'Target Company',
+                jobDescription: document.getElementById('job-description').value
+            };
+
             const resumeOutput = document.getElementById('resume-output');
             const analysisOutput = document.getElementById('analysis-output');
-            resumeOutput.innerHTML = '<p>🚀 Generating AI-Optimized Resume...</p>';
+            resumeOutput.innerHTML = '<p>🚀 Contacting AI Agent to generate content...</p>';
             analysisOutput.innerHTML = '<p>📊 Analyzing your profile against the job...</p>';
 
-            // Construct the prompt for the LLM
-            const prompt = `Based on the following information, generate an optimized resume and a matching analysis:
-
-**User Profile:**
-- Name: ${name}
-- Current Position: ${currentRole}
-- Years of Experience: ${experience} years
-- Skills: ${skills}
-
-**Target Position:**
-- Job Title: ${jobTitle}
-- Company Name: ${company}
-- Job Description: ${jobDescription}
-
-Please return a JSON object strictly containing two keys:
-1. "resume" - The complete resume content (in HTML format), including:
-   - Professional Summary (highlighting the match with the position)
-   - Core Skills (sorted by importance)
-   - Work Experience (can generate examples based on common experience, emphasizing achievements relevant to the target position)
-   - Education
-
-2. "analysis" - The matching analysis (in HTML format), including:
-   - A match score (0-100%) displayed in a styled div
-   - A list of matched skills
-   - 3-5 specific suggestions for improvement
-
-JSON format example:
-{
-  "resume": "<h1>Name</h1><h2>Professional Summary</h2><p>...</p>",
-  "analysis": "<div class='match-score' style='...'>85%</div><h3>Matched Skills</h3>..."
-}`;
-
-            const systemPrompt = 'You are a professional career consultant and resume expert. Please strictly follow the JSON format for the response, ensuring the HTML is well-formed and professional.';
-
             try {
-                // Call the LLM API
-                const aiReply = await callLLM(prompt, systemPrompt);
+                const aiReply = await callAIAgent('resume', resumeData);
                 const llmResponse = parseAIResponse(aiReply);
                 
                 if (llmResponse && llmResponse.resume && llmResponse.analysis) {
                     resumeOutput.innerHTML = llmResponse.resume;
                     analysisOutput.innerHTML = llmResponse.analysis;
                 } else {
-                    // 如果解析失败，直接显示 AI 的回复
                     resumeOutput.innerHTML = `<div style="line-height: 1.6;">${aiReply.replace(/\n/g, '<br>')}</div>`;
                     analysisOutput.innerHTML = '<p>✅ Resume generated (format may need adjustment)</p>';
                 }
             } catch (error) {
-                resumeOutput.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+                resumeOutput.innerHTML = '<p style="color: red;">❌ Generation failed, please check server logs.</p>';
                 analysisOutput.innerHTML = '<p style="color: red;">❌ Generation failed</p>';
             }
         }
 
-        // 2. INTERVIEW COACH - AI-POWERED FUNCTIONALITY
+        // 2. INTERVIEW COACH
         async function generateInterviewQuestions() {
-            const role = document.getElementById('interview-role').value || 'Developer';
-            const level = document.getElementById('interview-level').value;
-            const skills = document.getElementById('interview-skills').value || 'Relevant Skills';
-
-            const levelText = {
-                'entry': 'Entry Level',
-                'mid': 'Mid Level', 
-                'senior': 'Senior Level',
-                'lead': 'Lead/Manager'
-            }[level];
-
+            const interviewData = {
+                role: document.getElementById('interview-role').value || 'Developer',
+                level: document.getElementById('interview-level').value,
+                skills: document.getElementById('interview-skills').value || 'Relevant Skills'
+            };
             const outputDiv = document.getElementById('interview-output');
-            outputDiv.innerHTML = '<p>🤔 AI is generating customized interview questions for you...</p>';
-
-            const prompt = `As a senior interviewer and career consultant, generate comprehensive interview preparation materials for the following position:
-
-**Position Information:**
-- Position: ${role}
-- Level: ${levelText}
-- Key Skills: ${skills}
-
-Please generate the following content (using HTML format):
-
-1. **Technical Interview Questions** (8-10 questions)
-   - Technical depth appropriate for the position level
-   - Covering the listed key skills
-   - Including system design, algorithms, best practices, etc.
-
-2. **Behavioral Interview Questions** (5-6 questions)
-   - Questions suitable for the STAR method
-   - Targeting leadership/collaboration skills for this level
-   - Scenarios for conflict resolution and challenges
-
-3. **For each question, provide:**
-   - The question itself
-   - The competencies the interviewer wants to assess
-   - Answering strategy/key points (brief)
-
-4. **Interview Preparation Advice**
-   - Key preparation points for this position
-   - Explanation of the STAR method
-   - 3-5 practical tips
-
-Please use the following HTML structure:
-- Use <div class="skill-category"> to wrap each major category
-- Use <div class="question-item"> to wrap each question
-- Use <div class="tips"> to wrap preparation advice`;
-
-            const systemPrompt = 'You are an experienced interviewer and career mentor, skilled at designing in-depth interview questions. Please provide practical, professional interview preparation materials.';
+            outputDiv.innerHTML = '<p>🤔 AI Agent is generating customized interview questions...</p>';
 
             try {
-                const aiReply = await callLLM(prompt, systemPrompt);
-                // 直接使用 AI 返回的 HTML
+                const aiReply = await callAIAgent('interview', interviewData);
                 outputDiv.innerHTML = aiReply;
             } catch (error) {
-                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check server logs.</p>';
             }
         }
 
-        // 3. LEARNING PATH - AI-POWERED FUNCTIONALITY
+        // 3. LEARNING PATH
         async function generateLearningPath() {
-            const currentSkills = document.getElementById('current-skills').value || 'Basic Skills';
-            const targetRole = document.getElementById('target-role-learning').value || 'Full Stack Developer';
-            const timeline = parseInt(document.getElementById('timeline').value);
-
+            const learningData = {
+                currentSkills: document.getElementById('current-skills').value || 'Basic Skills',
+                targetRole: document.getElementById('target-role-learning').value || 'Full Stack Developer',
+                timeline: parseInt(document.getElementById('timeline').value)
+            };
             const outputDiv = document.getElementById('learning-output');
-            outputDiv.innerHTML = '<p>📚 AI is planning a personalized learning path for you...</p>';
-
-            const prompt = `As a senior career mentor and skill development expert, create a detailed learning path for the following situation:
-
-**Current Status:**
-- Existing Skills: ${currentSkills}
-- Target Position: ${targetRole}
-- Learning Timeline: ${timeline} months
-
-Please generate a detailed learning path plan (in HTML format), including:
-
-1. **Skill Gap Analysis**
-   - Skills already possessed (mark with ✅)
-   - Skills that need to be learned (mark with 📚)
-   - Prioritization of skills
-
-2. **Phased Learning Plan**
-   Divided into 3 phases over ${timeline} months:
-   - **Foundation Phase** (first ${Math.floor(timeline/3)} months): Essential basic knowledge and tools
-   - **Intermediate Phase** (middle ${Math.floor(timeline/3)} months): Deepening core skills
-   - **Advanced Phase** (last ${Math.ceil(timeline/3)} months): Advanced skills and project practice
-   
-   Each phase includes:
-   - Specific learning content
-   - Recommended types of learning resources
-   - Time allocation suggestions
-
-3. **Practical Project Suggestions**
-   - 3-5 progressive projects
-   - Skill application points for each project
-   - Increasing project difficulty
-
-4. **Learning Resource Recommendations**
-   - Online course platforms
-   - Book recommendations
-   - Practice platforms
-
-5. **Weekly Learning Plan**
-   - Suggested weekly study hours
-   - Learning methods (theory vs. practice ratio)
-   - Milestone checkpoints
-
-Please use the following HTML structure:
-- <div class="skill-category"> to wrap each learning phase
-- Use colored divs to mark skill status: #d1fae5 for mastered, #fef3c7 for to-learn
-- <div class="tips"> to wrap learning advice and resources`;
-
-            const systemPrompt = 'You are an experienced career mentor and learning planner, skilled at creating personalized, actionable learning paths. Please ensure the advice is specific and actionable.';
+            outputDiv.innerHTML = '<p>📚 AI Agent is planning a personalized learning path...</p>';
 
             try {
-                const aiReply = await callLLM(prompt, systemPrompt);
+                const aiReply = await callAIAgent('learning_path', learningData);
                 outputDiv.innerHTML = aiReply;
             } catch (error) {
-                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check server logs.</p>';
             }
         }
 
-        // 4. COVER LETTER GENERATOR - AI-POWERED FUNCTIONALITY
+        // 4. COVER LETTER GENERATOR
         async function generateCoverLetter() {
-            const company = document.getElementById('cl-company').value || 'Target Company';
-            const role = document.getElementById('cl-role').value || 'Target Role';
-            const achievement = document.getElementById('cl-highlight').value || 'My work experience and achievements';
-            const tone = document.getElementById('cl-tone').value;
-
-            const toneText = {
-                'professional': 'Professional',
-                'enthusiastic': 'Enthusiastic',
-                'formal': 'Formal'
-            }[tone];
-
+            const letterData = {
+                company: document.getElementById('cl-company').value || 'Target Company',
+                role: document.getElementById('cl-role').value || 'Target Role',
+                achievement: document.getElementById('cl-highlight').value || 'My work experience and achievements',
+                tone: document.getElementById('cl-tone').value
+            };
             const outputDiv = document.getElementById('coverletter-output');
-            outputDiv.innerHTML = '<p>✍️ AI is writing a personalized cover letter for you...</p>';
-
-            const prompt = `As a professional cover letter writing expert, write a high-quality cover letter for the following job application scenario:
-
-**Application Information:**
-- Target Company: ${company}
-- Position Applied For: ${role}
-- Core Achievement: ${achievement}
-- Writing Style: ${toneText}
-
-Please generate a complete cover letter (in HTML format), including:
-
-1. **Salutation** (choose an appropriate opening based on the style)
-
-2. **Opening Paragraph**
-   - Express interest in the position
-   - Briefly explain why you are applying
-   - Reflect the ${toneText} style
-
-3. **Body Paragraphs** (2-3 paragraphs)
-   - First paragraph: Elaborate on the core achievement, supported by specific data and results
-   - Second paragraph: Explain why you are a good fit for ${company} and ${role}
-   - Third paragraph (optional): Show your knowledge and appreciation of the company
-
-4. **Closing Paragraph**
-   - Reiterate your interest and value
-   - Politely request an interview opportunity
-   - Thank the reader
-
-5. **Signature**
-   - Include a polite closing
-   - Placeholders for [Name], [Phone], [Email]
-
-6. **Customization Suggestions**
-   After the cover letter, add a <div class="tips"> containing 3-5 specific optimization suggestions
-
-Note:
-- Use <p> tags for paragraphs
-- Line height 1.8, font Arial
-- Maintain a consistent ${toneText} tone
-- Avoid being too generic, be as specific as possible
-- Keep the length moderate (300-400 words)`;
-
-            const systemPrompt = 'You are an experienced career consultant and expert cover letter writer. Please write a professional, persuasive, and personalized cover letter.';
+            outputDiv.innerHTML = '<p>✍️ AI Agent is writing a personalized cover letter...</p>';
 
             try {
-                const aiReply = await callLLM(prompt, systemPrompt);
+                const aiReply = await callAIAgent('cover_letter', letterData);
                 outputDiv.innerHTML = aiReply;
             } catch (error) {
-                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check server logs.</p>';
             }
         }
 
-        // 5. LINKEDIN OPTIMIZER - AI-POWERED FUNCTIONALITY
+        // 5. LINKEDIN OPTIMIZER
         async function optimizeLinkedIn() {
-            const headline = document.getElementById('li-headline').value || 'Current Professional';
-            const about = document.getElementById('li-about').value || 'Experienced professional seeking new opportunities';
-            const target = document.getElementById('li-target').value || 'Technology field';
-
+            const linkedinData = {
+                headline: document.getElementById('li-headline').value || 'Current Professional',
+                about: document.getElementById('li-about').value || 'Experienced professional seeking new opportunities',
+                target: document.getElementById('li-target').value || 'Technology field'
+            };
             const outputDiv = document.getElementById('linkedin-output');
-            outputDiv.innerHTML = '<p>💼 AI is optimizing your LinkedIn profile...</p>';
-
-            const prompt = `As a LinkedIn profile optimization expert and personal branding consultant, optimize the following LinkedIn profile:
-
-**Current Profile:**
-- Current Headline: ${headline}
-- Current About Section: ${about}
-- Target Industry/Roles: ${target}
-
-Please generate an optimized LinkedIn profile (in HTML format), including:
-
-1. **Optimized Headline**
-   - Include job title, professional field, key skills
-   - Use | or • as separators
-   - Make full use of the 220-character limit
-   - Include search keywords
-   - Display in <div class="question-item" style="font-size: 1.1em; font-weight: bold;">
-
-2. **Optimized About Section**
-   - Opening: An engaging self-introduction
-   - Core Competencies: 3-5 professional areas
-   - Skills List: Categorized (core competencies, technical skills, etc.)
-   - Career Highlights: 2-3 quantifiable achievements
-   - Closing: Open to opportunities and contact information
-   - Use <p> and <strong> tags
-   - Line height 1.6
-
-3. **Recommended Hashtags**
-   - 8-10 relevant industry hashtags
-   - Format: #hashtag
-
-4. **Optimization Suggestions**
-   Use <div class="tips"> to include:
-   - Suggestions for optimizing the skills section
-   - Content publishing strategy
-   - Networking expansion advice
-   - 5-7 practical tips
-
-Note:
-- Emphasize keywords related to ${target}
-- Use industry-specific professional terminology
-- Reflect personal brand and value
-- SEO-friendly (to be easily found by search)
-`;
-
-            const systemPrompt = 'You are a LinkedIn optimization expert and personal branding consultant, skilled at creating professional and attractive LinkedIn profiles.';
+            outputDiv.innerHTML = '<p>💼 AI Agent is optimizing your LinkedIn profile...</p>';
 
             try {
-                const aiReply = await callLLM(prompt, systemPrompt);
+                const aiReply = await callAIAgent('linkedin', linkedinData);
                 outputDiv.innerHTML = aiReply;
             } catch (error) {
-                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check server logs.</p>';
             }
         }
 
-        // 6. SALARY INTELLIGENCE - AI-ENHANCED FUNCTIONALITY
+        // 6. SALARY INTELLIGENCE
         async function analyzeSalary() {
-            const role = document.getElementById('salary-role').value || 'Software Engineer';
-            const location = document.getElementById('salary-location').value || 'San Francisco, CA';
-            const experience = parseInt(document.getElementById('salary-experience').value) || 3;
-            const companySize = document.getElementById('salary-company').value;
-
+            const salaryData = {
+                role: document.getElementById('salary-role').value || 'Software Engineer',
+                location: document.getElementById('salary-location').value || 'San Francisco, CA',
+                experience: parseInt(document.getElementById('salary-experience').value) || 3,
+                companySize: document.getElementById('salary-company').value
+            };
             const outputDiv = document.getElementById('salary-output');
-            outputDiv.innerHTML = '<p>💰 AI is analyzing market salary data...</p>';
-
-            const companySizeText = {
-                'startup': 'Startup (1-50 employees)',
-                'small': 'Small (51-200 employees)',
-                'medium': 'Medium (201-1000 employees)',
-                'large': 'Large (1001-5000 employees)',
-                'enterprise': 'Enterprise (5000+ employees)'
-            }[companySize];
-
-            const prompt = `As a salary negotiation expert and market analyst, analyze the salary for the following position:
-
-**Position Information:**
-- Job Title: ${role}
-- Location: ${location}
-- Years of Experience: ${experience} years
-- Company Size: ${companySizeText}
-
-Please provide a detailed salary analysis report (in HTML format), including:
-
-1. **Salary Estimation**
-   Create 3 <div class="salary-item"> cards showing:
-   - Base Salary (annual range: low-average-high)
-   - Annual Bonus (as a percentage of base salary)
-   - Equity/RSUs (estimated value vesting over 4 years)
-   
-   Each card format:
-   \
-   <div class="salary-item">
-       <div class="salary-value">$XXX,XXX</div>
-       <div>Item Name</div>
-       <small>Additional Info</small>
-   </div>
-   \
-
-2. **Total Compensation**
-   Display using the following style:
-   \
-   <div class="match-score" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">
-       Total Compensation: $XXX,XXX/year
-   </div>
-   \
-
-3. **Market Positioning Analysis**
-   Include in a <div class="skill-category">:
-   - Geographic Impact (${location} compared to national average)
-   - Experience Premium (${experience} years vs. new graduate)
-   - Company Size Impact (trade-off between base salary vs. equity)
-   - Industry Comparison
-
-4. **Negotiation Strategy**
-   Provide in a <div class="tips">:
-   - Target salary range (considering a 10-15% negotiation buffer)
-   - Equity negotiation advice
-   - Benefits considerations
-   - 5-7 practical negotiation tips
-   - Market trend insights
-
-Notes:
-- All amounts should use USD ($) and thousand separators
-- Salary data should be current for 2024-2025 market conditions
-- Consider the cost of living in ${location}
-- Differentiate salary structures for different company sizes
-- The advice given should be specific and actionable
-
-Add a title before the salary cards:
-<h4>💰 Salary Analysis: ${role}</h4>
-<div class="salary-breakdown">
-[three salary-item cards]
-</div>`;
-
-            const systemPrompt = 'You are a salary negotiation expert and market analyst, specializing in the tech industry compensation structure. Please provide accurate, practical salary analysis and negotiation advice.';
-
+            outputDiv.innerHTML = '<p>💰 AI Agent is analyzing market salary data...</p>';
 
             try {
-                const aiReply = await callLLM(prompt, systemPrompt);
+                const aiReply = await callAIAgent('salary', salaryData);
                 outputDiv.innerHTML = aiReply;
             } catch (error) {
-                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check server logs.</p>';
             }
         }
 
         // UTILITY FUNCTIONS
-        function extractKeywords(text) {
-            if (!text) return ['various', 'skills', 'experience'];
-            const commonWords = ['the', 'a', 'an', 'and', 'or', 'but', 'in', 'on', 'at', 'to', 'for', 'of', 'with', 'by'];
-            return text.toLowerCase()
-                .replace(/[^\w\s]/g, '')
-                .split(/\s+/)
-                .filter(word => word.length > 3 && !commonWords.includes(word))
-                .slice(0, 15);
-        }
-
-        function generateProfessionalSummary(name, currentRole, experience, jobTitle, company, matchedSkills) {
-            return `Accomplished ${currentRole} with ${experience} years of experience seeking ${jobTitle} position at ${company}. Proven expertise in ${matchedSkills.slice(0,3).join(', ')} with track record of delivering innovative solutions and driving business growth. Strong background in full project lifecycle management and cross-functional collaboration.`;
-        }
-
-        function getSkillDescription(skill) {
-            const descriptions = {
-                'python': 'Python programming and development',
-                'javascript': 'JavaScript and modern frameworks',
-                'react': 'React.js and frontend development',
-                'node': 'Node.js and backend services',
-                'aws': 'Amazon Web Services cloud platform',
-                'docker': 'Containerization and DevOps',
-                'machine learning': 'ML algorithms and model development',
-                'data analysis': 'Data processing and insights generation',
-                'project management': 'Project planning and execution',
-                'leadership': 'Team leadership and mentorship'
-            };
-            return descriptions[skill.toLowerCase()] || 'relevant professional skill';
-        }
-
-        function getScoreColor(score) {
-            if (score >= 80) return 'linear-gradient(135deg, #10b981, #34d399)';
-            if (score >= 60) return 'linear-gradient(135deg, #f59e0b, #fbbf24)';
-            return 'linear-gradient(135deg, #ef4444, #f87171)';
-        }
-
         function exportToPDF() {
             const element = document.getElementById('resume-output');
             const opt = {
@@ -1102,87 +683,46 @@ Add a title before the salary cards:
             });
         }
 
-        // API CONFIGURATION - DeepSeek only
-        const API_CONFIG = {
-            model: 'deepseek-chat'
-        };
-
-        // LLM API CALL - REAL IMPLEMENTATION
-        async function callLLM(prompt, systemPrompt = 'You are a professional career consultant and AI assistant. Please provide valuable and practical advice.') {
-            console.log("Sending request to HF Space backend...");
-
+        // LLM API CALL - NEW AGENT IMPLEMENTATION
+        async function callAIAgent(task, data) {
+            console.log(`Sending task '${task}' to AI agent backend...`);
             const statusIcon = document.getElementById('api-status');
-            
-            // Set status to loading
             if (statusIcon) statusIcon.textContent = '🔄';
 
             try {
-                // This is the request body DeepSeek expects.
-                // We build it here and send it to our backend proxy.
-                const requestBody = {
-                    model: API_CONFIG.model,
-                    messages: [
-                        {
-                            role: 'system',
-                            content: systemPrompt
-                        },
-                        {
-                            role: 'user',
-                            content: prompt
-                        }
-                    ],
-                    temperature: 0.7,
-                    stream: false
-                };
-                
-                // Send the request to OUR backend endpoint '/call-deepseek'
-                const response = await fetch('/call-deepseek', {
+                const response = await fetch('/generate', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(requestBody) // Send the JSON payload
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ task, data })
                 });
 
                 if (!response.ok) {
-                    // Get error detail from our FastAPI backend
-                    const errorData = await response.json().catch(() => ({}));
+                    const errorData = await response.json().catch(() => ({ detail: `Server Error ${response.status}: ${response.statusText}` }));
                     if (statusIcon) statusIcon.textContent = '❌';
-                    throw new Error(errorData.detail || `Server Error ${response.status}: ${response.statusText}`);
+                    throw new Error(errorData.detail);
                 }
 
-                // The 'data' is the full response from DeepSeek,
-                // proxied through our backend
-                const data = await response.json();
-                
+                const responseData = await response.json();
                 if (statusIcon) statusIcon.textContent = '✅';
                 
-                // Extract the AI reply as before
-                let aiReply = data.choices[0].message.content;
-                console.log("AI reply received, length:", aiReply.length);
-
-                return aiReply;
+                console.log("AI Agent reply received, length:", responseData.content.length);
+                return responseData.content;
 
             } catch (error) {
                 if (statusIcon) statusIcon.textContent = '❌';
-                console.error("API call error:", error);
-                
-                alert(`❌ API call failed: ${error.message}\n\nPlease check the server status. If this persists, the app owner may need to check the Hugging Face logs.`);
-                
+                console.error("Agent call error:", error);
+                alert(`❌ Agent call failed: ${error.message}\n\nPlease check the server status and logs.`);
                 throw error;
             }
         }
 
-        // 解析 JSON 响应的辅助函数
+        // Parse JSON response from AI
         function parseAIResponse(aiReply) {
             try {
-                // Clean up possible markdown code block markers
                 let cleaned = aiReply.replace(/```json\n?/g, '').replace(/```\n?/g, '').trim();
                 return JSON.parse(cleaned);
             } catch (parseError) {
                 console.warn("JSON parsing failed, trying to extract:", parseError);
-                
-                // Try to extract the JSON object
                 const jsonMatch = aiReply.match(/\{[\s\S]*\}/);
                 if (jsonMatch) {
                     try {
@@ -1191,20 +731,15 @@ Add a title before the salary cards:
                         console.error("Secondary parsing failed:", e);
                     }
                 }
-                
-                // Return the original text
                 return null;
             }
         }
 
         // Initialize with sample data
         document.addEventListener('DOMContentLoaded', function() {
-            
-            // Set status to 'Ready'
             const statusIcon = document.getElementById('api-status');
             if (statusIcon) statusIcon.textContent = '✅';
             
-            // Set sample data for demonstration
             document.getElementById('name').value = 'Alexandra Chen';
             document.getElementById('current-role').value = 'Senior Frontend Developer';
             document.getElementById('experience').value = '6';
@@ -1245,7 +780,6 @@ Requirements:
             document.getElementById('salary-location').value = 'San Francisco, CA';
             document.getElementById('salary-experience').value = '6';
         });
-
     </script>
 </body>
 </html>