Upload 9 files

CHANGELOG.md

@@ -0,0 +1,412 @@
+# 📝 CareerForge AI - Changelog
+
+## Version 2.0 - Complete Version (November 10, 2024)
+
+### 🎉 Major Update
+
+This update transforms the original empty shell application into a **fully functional AI-driven platform**!
+
+---
+
+## ✨ Core Improvements
+
+### 1. Removed Doubao option, simplified API configuration
+
+**Before:**
+- Supported both DeepSeek and Doubao APIs
+- Complex configuration, Doubao required an additional endpoint ID
+- More UI options
+
+**After:**
+- ✅ Uses only the DeepSeek API
+- ✅ Simplified configuration process
+- ✅ Cleaner and clearer interface
+- ✅ Lowered the barrier to entry
+
+**Code changes:**
+```javascript
+// Removed the complex API_CONFIG object
+// Simplified to a single configuration
+const API_CONFIG = {
+    endpoint: 'https://api.deepseek.com/v1/chat/completions',
+    model: 'deepseek-chat'
+};
+```
+
+---
+
+### 2. Smart Resume - Maintained and Optimized
+
+**Function:** AI generates optimized resumes and matching analysis
+
+**Improvements:**
+- ✅ Optimized Prompt template to improve generation quality
+- ✅ Improved JSON parsing logic
+- ✅ Added error fallback handling
+- ✅ Localized hint messages
+
+**Generated content:**
+- Complete optimized resume (HTML format)
+- Matching analysis (percentage + suggestions)
+- Can be exported as PDF or copied as text
+
+---
+
+### 3. Interview Coach - From Template to AI Generation
+
+**Before:**
+- Used a fixed question bank
+- Returned preset questions based on level
+- General-purpose but not very specific
+
+**After:**
+- ✅ Completely generated by AI
+- ✅ Customized based on the specific position and skills
+- ✅ Includes key points to assess and answering strategies
+- ✅ Provides guidance on the STAR method
+
+**Generated content:**
+- 8-10 technical interview questions
+- 5-6 behavioral interview questions
+- Key points to assess for each question
+- Answering strategies and preparation advice
+
+**Prompt design:**
+```
+For ${role} - ${level} level
+Key skills: ${skills}
+Generate customized interview questions and strategies
+```
+
+---
+
+### 4. Learning Path - From Database to AI Generation
+
+**Before:**
+- Used preset skill roadmaps
+- Fixed learning phase division
+- General but lacked personalization
+
+**After:**
+- ✅ AI analyzes the gap based on current skills
+- ✅ Personalized learning path planning
+- ✅ Detailed phased learning plan
+- ✅ Recommends specific resources and projects
+
+**Generated content:**
+- Skill gap analysis (have vs. to-learn)
+- 3-phase learning plan (Beginner → Intermediate → Advanced)
+- 3-5 practical project suggestions
+- Learning resource recommendations
+- Weekly learning plan
+
+**Intelligent analysis:**
+```
+Compare current skills vs. target position requirements
+Identify priorities
+Plan a ${timeline}-month learning path
+```
+
+---
+
+### 5. Cover Letter - From Template to AI Generation
+
+**Before:**
+- Used a fixed cover letter template
+- Simple variable filling
+- The content was quite generic
+
+**After:**
+- ✅ AI writes a personalized cover letter
+- ✅ Deeply customized based on achievements and position
+- ✅ Supports multiple writing styles
+- ✅ Provides optimization suggestions
+
+**Generated content:**
+- Complete cover letter (salutation-body-signature)
+- Professional language
+- Specific achievement descriptions
+- 3-5 customized suggestions
+
+**Style options:**
+- Professional
+- Enthusiastic
+- Formal
+
+---
+
+### 6. LinkedIn Optimizer - From Keywords to AI Generation
+
+**Before:**
+- Based on a keyword library for the industry
+- Simple template filling
+- Fixed structure
+
+**After:**
+- ✅ AI optimizes the personal profile
+- ✅ SEO-friendly headline
+- ✅ Structured summary content
+- ✅ Recommends hashtags and optimization suggestions
+
+**Generated content:**
+- Optimized LinkedIn headline (220 characters)
+- Professional About summary
+- 8-10 recommended hashtags
+- 5-7 optimization suggestions
+
+**Optimization focus:**
+```
+Keyword optimization (to improve search ranking)
+Personal brand building
+Highlighting skills
+Quantifiable achievements
+```
+
+---
+
+### 7. Salary Intelligence - From Calculation to AI Analysis
+
+**Before:**
+- Based on a fixed salary database
+- Simple multiplier calculation
+- Data could be outdated
+
+**After:**
+- ✅ AI analyzes market salaries
+- ✅ Real-time market data
+- ✅ Detailed market positioning analysis
+- ✅ Specific negotiation strategies
+
+**Generated content:**
+- Salary estimation (base salary + bonus + equity)
+- Total compensation analysis
+- Market positioning (geography, experience, company impact)
+- 5-7 negotiation tips
+- Market trend insights
+
+**Analysis dimensions:**
+```
+Position: ${role}
+Location: ${location}
+Experience: ${experience} years
+Company size: ${companySize}
+→ Comprehensive analysis of market conditions
+```
+
+---
+
+## 🔧 Technical Improvements
+
+### API Call Optimization
+
+**Before:**
+```javascript
+// Complex provider judgment
+const config = API_CONFIG[provider];
+```
+
+**After:**
+```javascript
+// Directly use DeepSeek configuration
+fetch(API_CONFIG.endpoint, { ... })
+```
+
+### Prompt Engineering
+
+Designed a dedicated Prompt template for each feature:
+- Clear role definition (expert identity)
+- Detailed output requirements (HTML structure)
+- Specific format specifications (CSS class names)
+- Clear content guidance
+
+### Error Handling
+
+```javascript
+try {
+    const aiReply = await callLLM(prompt, systemPrompt);
+    outputDiv.innerHTML = aiReply;
+} catch (error) {
+    outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed</p>';
+}
+```
+
+### State Management
+
+Real-time status feedback:
+- ⚪ Not configured
+- 🔄 Generating
+- ✅ Success
+- ❌ Failed
+
+---
+
+## 📦 Project Structure Optimization
+
+### File Organization
+
+**Before:**
+- Files scattered on the desktop
+- `3.html` was not intuitive
+- Lack of documentation
+
+**After:**
+```
+CareerForge-AI/
+├── index.html          # Main application (was 3.html)
+├── README.md           # Project homepage
+├── INSTRUCTIONS.md     # Detailed documentation
+├── QUICK_REFERENCE.md  # Quick reference guide
+├── start_app.command   # Startup script
+├── PROJECT_OVERVIEW.txt# File manifest
+└── CHANGELOG.md        # This file
+```
+
+### Documentation Improvement
+
+Added 4 new documents:
+1. **README.md** - Project introduction and quick start
+2. **INSTRUCTIONS.md** - Detailed user guide (12KB)
+3. **QUICK_REFERENCE.md** - Quick reference sheet
+4. **PROJECT_OVERVIEW.txt** - File manifest and navigation
+
+### Startup Script
+
+```bash
+# One-click startup of the application
+./start_app.command
+```
+
+---
+
+## 📊 Feature Comparison Overview
+
+| Feature | v1.0 | v2.0 |
+|---|---|---|
+| Smart Resume | ✅ AI-generated | ✅ AI-generated (optimized) |
+| Interview Coach | ❌ Question bank | ✅ AI-generated |
+| Learning Path | ❌ Database | ✅ AI-generated |
+| Cover Letter | ❌ Template | ✅ AI-generated |
+| LinkedIn | ❌ Keywords | ✅ AI-generated |
+| Salary Intel | ❌ Calculation | ✅ AI-analyzed |
+
+**Conclusion: From 1/6 AI-powered → 6/6 fully AI-powered!**
+
+---
+
+## 💰 Cost Comparison
+
+### v1.0 (Original)
+- Only the resume feature consumed API
+- Other features were free but of limited quality
+
+### v2.0 (Complete)
+- All features consume API
+- Cost per generation: ¥0.005-0.02
+- Quality is significantly improved
+- A ¥10 top-up can be used hundreds of times
+
+**Value for money: Extremely high!**
+
+---
+
+## 🎯 User Experience Improvement
+
+### Simplified Configuration
+- Removed Doubao option
+- One input box to get it done
+- Automatic saving and loading
+
+### UI Optimization
+- Clearer status prompts
+- Real-time loading animation
+- Friendly error messages
+
+### Localization
+- All prompts are localized
+- Prompts use Chinese
+- Documentation is fully in Chinese
+
+---
+
+## 🔐 Security Enhancement
+
+### Privacy Protection
+- API Key is stored locally only
+- Not uploaded to third-party servers
+- Code is open-source and auditable
+
+### Error Handling
+- Complete exception capture
+- Friendly error prompts
+- Prevents leakage of sensitive information
+
+---
+
+## 📈 Quality Improvement
+
+### Generation Quality
+Through carefully designed Prompts:
+- The output is more professional
+- The format is more standardized
+- The content is more specific
+- The practicality is stronger
+
+### Response Speed
+- Optimized API calls
+- Reduced unnecessary parsing
+- Improved user experience
+
+### Stability
+- Complete error handling
+- Multi-layer fallback solution
+- Reduced failure rate
+
+---
+
+## 🚀 Future Plans
+
+### Possible Improvement Directions
+- [ ] Add history function
+- [ ] Support multi-language output
+- [ ] Add export format options
+- [ ] Support batch generation
+- [ ] Add template collection function
+
+---
+
+## 🎉 Summary
+
+### Key Achievements
+
+✅ **Feature completeness**: From 16.7% → 100%
+✅ **AI coverage**: From 1/6 → 6/6
+✅ **Documentation completeness**: From 0 → 4 documents
+✅ **User experience**: Significantly improved
+✅ **Project structure**: Professionally organized
+
+### User Value
+
+- 🎯 A truly usable career development tool
+- 💰 Extremely low cost (¥10 can be used for a long time)
+- 🚀 Significantly improves job search efficiency
+- 📚 Comprehensive career planning support
+- 🔐 Privacy and security are guaranteed
+
+---
+
+## 📞 Technical Support
+
+If you have questions or suggestions, please refer to:
+- **INSTRUCTIONS.md** - Detailed guide
+- **QUICK_REFERENCE.md** - FAQ
+- **DeepSeek Documentation** - API related
+
+---
+
+**Thank you for using CareerForge AI v2.0!**
+
+Wishing you success in your job search and a prosperous career! 🚀✨
+
+---
+
+*Last updated: November 10, 2024*

Dockerfile

@@ -0,0 +1,24 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file into the container
+COPY requirements.txt .
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application files into the container
+# This includes app.py and the 'static' folder
+COPY . .
+
+# Make port 7860 available (standard for HF Spaces)
+EXPOSE 7860
+
+# Define environment variable for the port
+ENV PORT=7860
+
+# Run uvicorn server
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

INSTRUCTIONS.md

@@ -0,0 +1,495 @@
+# 🚀 CareerForge AI - Complete User Guide
+
+## ✨ What's New
+
+Your `index.html` is now a **fully functional** AI-driven career development platform!
+
+### Completed Improvements:
+
+✅ **Removed Doubao option** - Simplified to use only the DeepSeek API
+✅ **Smart Resume** - AI generates optimized resumes and matching analysis
+✅ **Interview Coach** - AI generates customized interview questions and answer strategies
+✅ **Learning Path** - AI plans personalized learning paths
+✅ **Cover Letter** - AI writes professional cover letters
+✅ **LinkedIn Optimizer** - AI optimizes LinkedIn profiles
+✅ **Salary Intelligence** - AI analyzes market salaries and negotiation strategies
+
+**All 6 features now use AI to generate content!** 🎉
+
+---
+
+## 🔑 Step 1: Get DeepSeek API Key
+
+### Registration Steps:
+
+1. Visit [https://platform.deepseek.com](https://platform.deepseek.com)
+2. Click "Register/Login" in the top right corner
+3. Register with your email or phone number
+4. After logging in, go to the "API Keys" page
+5. Click "Create new API Key"
+6. **Copy and save** the API Key (it will only be shown once!)
+7. Top up your account (a ¥10-20 top-up is recommended and will last a long time)
+
+### Cost Information:
+
+- **Price**: Approx. ¥1-2 / million tokens
+- **Cost per generation**: Approx. ¥0.005-0.02 (less than 2 cents)
+- **Top-up suggestion**: ¥10 can generate hundreds of pieces of content
+- **Free quota**: New users may have a free trial quota
+
+---
+
+## 🎯 Usage Steps
+
+### 1. Configure API Key
+
+1. Open `index.html` in your browser
+2. Find the "🔑 DeepSeek API Key" input box at the top of the page
+3. Paste your API Key
+4. A **✅** green checkmark indicates successful configuration
+5. The API Key will be automatically saved in your browser and loaded the next time you open it
+
+### 2. Use the Features
+
+---
+
+## 📋 Feature Details
+
+### 🎯 1. Smart Resume
+
+**Function:** AI generates a customized resume based on the job description
+
+**How to use:**
+1. Click the "🎯 Smart Resume" tab
+2. Fill in your personal information:
+   - Full Name
+   - Current Role
+   - Years of Experience
+   - List of skills (comma-separated)
+3. Fill in the target position information:
+   - Desired Job Title
+   - Company Name
+   - **Complete Job Description** (copy and paste)
+4. Click "🚀 Generate Optimized Resume"
+5. Wait for 5-20 seconds
+6. View the generated resume and matching analysis
+
+**Output:**
+- Left side: The complete optimized resume (HTML format)
+- Right side: Matching analysis and improvement suggestions
+
+**Export options:**
+- 📥 Export as PDF - Export as a PDF file
+- 📋 Copy Text - Copy as plain text
+
+---
+
+### 💼 2. Interview Coach
+
+**Function:** AI generates interview questions and answer strategies for a specific position
+
+**How to use:**
+1. Click the "💼 Interview Coach" tab
+2. Fill in the interview information:
+   - Target Role (e.g., Senior Developer)
+   - Experience Level (Entry/Mid/Senior/Lead)
+   - Key Skills (e.g., Python, System Design, Leadership)
+3. Click "🎯 Generate Questions"
+4. Wait for the AI to generate
+
+**Output:**
+- Technical interview questions (8-10)
+- Behavioral interview questions (5-6)
+- Key points to assess and answering strategies for each question
+- Explanation of the STAR method
+- Interview preparation advice
+
+**Tips:**
+- Prepare specific examples for each question
+- Use the STAR method to structure your answers
+- Practice controlling your answer time
+
+---
+
+### 📚 3. Learning Path
+
+**Function:** AI plans a learning path based on your current skills and target position
+
+**How to use:**
+1. Click the "📚 Learning Path" tab
+2. Fill in the information:
+   - Current Skills (list all the skills you have mastered)
+   - Target Role (e.g., AI Engineer)
+   - Learning Timeline (3/6/12 months)
+3. Click "🛠️ Create Learning Path"
+4. Wait for the AI to plan
+
+**Output:**
+- Skill gap analysis (Have ✅ vs. To Learn 📚)
+- Phased learning plan (Beginner → Intermediate → Advanced)
+- Learning content and time allocation for each phase
+- Practical project suggestions (3-5)
+- Learning resource recommendations
+- Weekly learning plan
+
+**Tips:**
+- Follow the plan step-by-step, don't skip ahead
+- Consolidate your learning with a project after each phase
+- Regularly check your learning progress
+
+---
+
+### ✉️ 4. Cover Letter
+
+**Function:** AI writes a professional, personalized cover letter
+
+**How to use:**
+1. Click the "✉️ Cover Letters" tab
+2. Fill in the information:
+   - Company Name
+   - Job Title
+   - Core Achievement (describe your most relevant achievement in detail)
+   - Writing Style (Professional/Enthusiastic/Formal)
+3. Click "✨ Generate Cover Letter"
+4. Wait for the AI to write
+
+**Output:**
+- A complete cover letter (including salutation, body, and signature)
+- Customized optimization suggestions
+- Ready to copy and use
+
+**Tips:**
+- Be as detailed and specific as possible in the "Core Achievement" section
+- Choose a writing style that suits the company culture
+- Fine-tune the generated letter based on your specific situation
+- Add specific company information and projects
+
+---
+
+### 💼 5. LinkedIn Optimizer
+
+**Function:** AI optimizes your LinkedIn personal profile
+
+**How to use:**
+1. Click the "💼 LinkedIn" tab
+2. Fill in your current profile information:
+   - Current Headline
+   - Current About Section
+   - Target Industry/Roles
+3. Click "🚀 Optimize Profile"
+4. Wait for the AI to optimize
+
+**Output:**
+- Optimized headline (making full use of the 220-character limit)
+- Optimized summary (structured and keyword-rich)
+- Recommended hashtags (8-10)
+- Profile optimization suggestions (skills, content publishing, networking)
+
+**Tips:**
+- Copy the optimized content to your LinkedIn profile
+- Add all relevant skills to your skills section
+- Regularly update and post industry-related content
+- Actively build your professional network
+
+---
+
+### 💰 6. Salary Intelligence
+
+**Function:** AI analyzes market salaries and provides negotiation strategies
+
+**How to use:**
+1. Click the "💰 Salary Intel" tab
+2. Fill in the information:
+   - Job Title (e.g., Senior Software Engineer)
+   - Location (e.g., San Francisco, CA or Remote)
+   - Years of Experience
+   - Company Size
+3. Click "💡 Get Salary Insights"
+4. Wait for the AI to analyze
+
+**Output:**
+- Salary estimation (base salary, bonus, equity)
+- Total compensation calculation
+- Market positioning analysis (impact of location, experience, company size)
+- Negotiation strategy (target range, equity advice, negotiation tips)
+- Market trend insights
+
+**Tips:**
+- Compare salaries across multiple regions
+- Focus on total compensation, not just base salary
+- Use the data as a basis for negotiation
+- Consider the cost of living differences
+
+---
+
+## 💡 Usage Tips
+
+### 1. Write High-Quality Prompts
+
+**Resume Optimization:**
+```
+The job description should be as detailed as possible:
+- Complete job requirements
+- Specific technology stack
+- Description of job responsibilities
+- Company background information
+```
+
+**Interview Preparation:**
+```
+Key skills should be specific:
+- Don't just write "programming," but "Python, Django, RESTful API"
+- Include soft skills: "team collaboration, project management"
+```
+
+**Learning Path:**
+```
+The list of current skills should be exhaustive:
+- List all the skills you have mastered
+- Include information on skill proficiency
+- Describe your actual project experience
+```
+
+### 2. Optimize AI Responses
+
+If the generated content is not satisfactory:
+1. **Regenerate** - The result may be different each time
+2. **Add more information** - Add more details in the input box
+3. **Adjust your requirements** - Clearly state the desired style and focus
+
+### 3. Save on API Costs
+
+- ✅ Fill in complete information before generating (to reduce retries)
+- ✅ Save satisfactory results to avoid repeated generation
+- ✅ Use reasonably, don't test frequently
+- ✅ Keep an eye on your account balance
+
+---
+
+## 🔐 Privacy & Security
+
+### ✅ Security Measures:
+- The API Key is only saved in your **browser's local** localStorage
+- It is not uploaded to any third-party servers
+- All requests are sent directly to DeepSeek
+- The code is fully open-source and can be audited by yourself
+
+### ⚠️ Precautions:
+- Do not save your API Key on public computers
+- Change your API Key regularly
+- Do not share your API Key
+- You can use placeholders for sensitive information (like your real name, phone number)
+
+---
+
+## 🔧 Troubleshooting
+
+### ❌ Displays "API Key not configured"
+**Reason:** The API Key was not entered or was cleared
+**Solution:** Re-enter your API Key at the top of the page
+
+### ❌ Displays "401 Unauthorized"
+**Reason:** The API Key is invalid or incorrect
+**Solution:**
+1. Check if the API Key is copied completely
+2. Confirm if the API Key has been activated
+3. Log in to the DeepSeek console and regenerate it
+
+### ❌ Displays "Insufficient balance"
+**Reason:** Insufficient account balance
+**Solution:** Log in to the DeepSeek console to top up
+
+### ❌ Generation is slow or times out
+**Reason:** Network issues or the service is busy
+**Solution:**
+1. Check your internet connection
+2. Try again later
+3. Reduce the length of the input content
+
+### ❌ The format of the generated content is chaotic
+**Reason:** The format returned by the AI does not meet expectations
+**Solution:**
+1. Refresh the page and try again
+2. Simplify the input content
+3. The content is still usable, but the format needs to be organized
+
+### 🌐 Network or CORS error
+**Reason:** Browser security restrictions
+**Solution:**
+1. Ensure that your network can access api.deepseek.com
+2. Try using a different browser
+3. Check if a proxy is needed
+
+---
+
+## 📊 Feature Comparison
+
+| Feature | Uses AI | Input Information | Generation Time | Main Purpose |
+|---|---|---|---|---|
+| Smart Resume | ✅ | Personal info + Job description | 5-20s | Customized resume |
+| Interview Coach | ✅ | Position + Level + Skills | 5-15s | Interview preparation |
+| Learning Path | ✅ | Current skills + Goal + Time | 10-20s | Learning planning |
+| Cover Letter | ✅ | Company + Position + Achievement | 5-15s | Cover letter |
+| LinkedIn | ✅ | Current profile + Goal | 5-15s | Personal branding |
+| Salary Intel | ✅ | Position + Location + Experience | 5-15s | Salary negotiation |
+
+---
+
+## 🎨 UI Explanation
+
+### Status Indicator (top right corner)
+
+- **⚪ Gray circle** - API Key is not configured or not validated
+- **🔄 Blue spinning** - Calling the DeepSeek AI
+- **✅ Green checkmark** - API call successful
+- **❌ Red cross** - API call failed or configuration error
+
+### Tab Explanation
+
+The page has 6 feature tabs, click to switch:
+1. 🎯 Smart Resume
+2. 💼 Interview Coach
+3. 📚 Learning Path
+4. ✉️ Cover Letters
+5. 💼 LinkedIn
+6. 💰 Salary Intel
+
+---
+
+## 🚀 Quick Start Guide
+
+### Get Started in 5 Minutes:
+
+1. **Get API Key** (3 minutes)
+   - Visit platform.deepseek.com
+   - Register and create an API Key
+   - Top up ¥10
+
+2. **Configure the Application** (30 seconds)
+   - Open `index.html`
+   - Paste the API Key
+   - See the ✅
+
+3. **Generate Your First Resume** (2 minutes)
+   - Fill in your personal information
+   - Paste the job description
+   - Click generate
+   - View the result
+
+4. **Export and Use** (30 seconds)
+   - Click "Export as PDF"
+   - Or copy the text content
+   - Apply it to your actual job search
+
+---
+
+## 💰 Cost Budget
+
+### Estimated Actual Usage Cost:
+
+| Use Case | Monthly Usage | Monthly Cost |
+|---|---|---|
+| Job Seeker (intensive) | 50 generations | ¥0.5-1 |
+| Daily Optimization | 20 generations | ¥0.2-0.5 |
+| Occasional Use | 5 generations | ¥0.05-0.1 |
+
+**Conclusion: A ¥10 top-up can last a long time!**
+
+---
+
+## 📖 Best Practices
+
+### Recommended Use Throughout the Job Search Process:
+
+1. **Preparation Phase**
+   - Use Learning Path to plan skill improvement
+   - Learn and practice for target positions
+
+2. **Application Phase**
+   - Use Smart Resume to customize your resume for each position
+   - Use Cover Letter to write your cover letter
+   - Use LinkedIn to optimize your personal brand
+
+3. **Interview Phase**
+   - Use Interview Coach to prepare for interview questions
+   - Use Salary Intel to understand the market situation
+
+4. **Negotiation Phase**
+   - Refer to the negotiation strategies from Salary Intelligence
+   - Negotiate your salary based on data
+
+---
+
+## 🎓 Advanced Tips
+
+### 1. Combine Features
+
+**Example: Complete Job Search Process**
+```
+1. Learning Path → Assess skill gaps
+2. Smart Resume → Generate resume
+3. Cover Letter → Write cover letter
+4. LinkedIn → Optimize online image
+5. Interview Coach → Prepare for interview
+6. Salary Intel → Understand the market situation
+```
+
+### 2. Generate and Compare Multiple Times
+
+For important content (like a resume), you can:
+1. Generate multiple versions
+2. Compare the advantages of different versions
+3. Combine the advantages of each version
+4. Form the final version
+
+### 3. Manual Optimization
+
+The content generated by AI is a foundation, it is recommended to:
+1. Add specific data and results
+2. Adjust the tone and style
+3. Check for factual accuracy
+4. Fine-tune based on the actual situation
+
+---
+
+## 🆘 Get Help
+
+### Official Resources:
+- [DeepSeek API Documentation](https://platform.deepseek.com/docs)
+- [DeepSeek Console](https://platform.deepseek.com/usage)
+
+### FAQ:
+If you encounter technical problems, please check:
+1. If the API Key is configured correctly
+2. If the network connection is normal
+3. If the account balance is sufficient
+4. The error message in the browser console (F12 → Console)
+
+---
+
+## ✅ Done!
+
+Congratulations! You now have a career development platform completely driven by AI!
+
+**Next steps:**
+1. ✅ Get DeepSeek API Key
+2. ✅ Configure it at the top of the page
+3. ✅ Choose a feature to start using
+4. ✅ Generate your first piece of AI content
+
+**Wishing you success in your job search and a prosperous career!** 🎉🚀
+
+---
+
+## 📝 Changelog
+
+**v2.0 - November 2024**
+- ✅ Removed Doubao option, simplified to DeepSeek only
+- ✅ All 6 features are integrated with AI generation
+- ✅ Optimized Prompt templates
+- ✅ Improved error handling
+- ✅ Enhanced Chinese support
+
+**v1.0 - Initial Version**
+- Only Smart Resume used AI
+- Other features used template generation

PROJECT_OVERVIEW.txt

@@ -0,0 +1,166 @@
+╔═══════════════════════════════════════════════════════════════╗
+║                                                                 ║
+║             🚀 CareerForge AI - Project File Description          ║
+║                                                                 ║
+║      AI-Driven Comprehensive Career Development Platform - Complete Version v2.0      ║
+║                                                                 ║
+╚═══════════════════════════════════════════════════════════════╝
+
+📁 Project File Structure
+═══════════════════════════════════════════════════════════════
+
+📄 index.html
+   → Main application (single-file app)
+   → Contains all 6 features: Resume, Interview, Learning, Cover Letter, LinkedIn, Salary
+   → Double-click to open and use
+   → Size: approx. 51KB
+
+📄 README.md
+   → Project homepage and quick start guide
+   → Contains feature introduction, usage instructions, FAQ
+   → Recommended to read this file first
+
+📄 INSTRUCTIONS.md
+   → Detailed user documentation
+   → Detailed instructions for each feature
+   → Troubleshooting and best practices
+   → Suitable for in-depth understanding
+
+📄 QUICK_REFERENCE.md
+   → Quick reference card
+   → At-a-glance information
+   → Troubleshooting cheat sheet
+   → Suitable for daily reference
+
+📄 start_app.command
+   → One-click startup script
+   → Double-click to open the application in the browser
+   → Displays usage tips
+   → Mac only
+
+📄 PROJECT_OVERVIEW.txt
+   → This file
+   → Project file manifest
+   → Quick navigation
+
+
+═══════════════════════════════════════════════════════════════
+🚀 Quick Start (3 Steps)
+═══════════════════════════════════════════════════════════════
+
+Step 1: Get API Key
+   1. Visit https://platform.deepseek.com
+   2. Register and log in
+   3. Create an API Key
+   4. Top up ¥10-20
+
+Step 2: Start the Application
+   Method 1: Double-click "start_app.command"
+   Method 2: Double-click "index.html" directly
+
+Step 3: Configure and Use
+   1. Enter your API Key at the top of the page
+   2. A ✅ indicates success
+   3. Choose a feature to start using
+
+
+═══════════════════════════════════════════════════════════════
+✨ 6 Core Features
+═══════════════════════════════════════════════════════════════
+
+🎯 Smart Resume
+   Generates a customized resume and matching analysis based on the job description
+
+💼 Interview Coach
+   Generates interview questions, key points to assess, and answering strategies
+
+📚 Learning Path
+   Personalized learning plan and project suggestions
+
+✉️ Cover Letter
+   AI writes a professional cover letter
+
+💼 LinkedIn Optimizer
+   Optimizes your personal profile and professional brand
+
+💰 Salary Intelligence
+   Market salary analysis and negotiation strategies
+
+
+═══════════════════════════════════════════════════════════════
+💰 Cost Information
+═══════════════════════════════════════════════════════════════
+
+Cost per generation: ¥0.005 - ¥0.02 (less than 2 cents)
+Top-up suggestion: ¥10 can be used for hundreds of times
+Overall cost: Extremely low, suitable for personal use
+
+
+═══════════════════════════════════════════════════════════════
+🔐 Privacy & Security
+═══════════════════════════════════════════════════════════════
+
+✅ API Key is saved only in the browser's local storage
+✅ Not uploaded to any third-party servers
+✅ All requests are sent directly to DeepSeek
+✅ Code is fully open-source and auditable
+
+
+═════════════════════════════════════════���═════════════════════
+📖 Recommended Reading Order
+═══════════════════════════════════════════════════════════════
+
+1️⃣ This file (PROJECT_OVERVIEW.txt)        → Understand the project structure
+2️⃣ README.md                               → Quick start
+3️⃣ QUICK_REFERENCE.md                      → Frequently used information
+4️⃣ INSTRUCTIONS.md                         → In-depth learning
+
+
+═══════════════════════════════════════════════════════════════
+🎯 Usage Suggestions
+═══════════════════════════════════════════════════════════════
+
+✅ The more detailed the input information, the higher the quality of the AI generation
+✅ You can generate multiple times and choose the best result
+✅ AI generation is the foundation, manual optimization is key
+✅ Save satisfactory results to avoid repeated consumption
+✅ Change your API Key regularly to ensure security
+
+
+═══════════════════════════════════════════════════════════════
+🔧 Technical Features
+═══════════════════════════════════════════════════════════════
+
+• Pure frontend application, no backend server required
+• Single-file application, one HTML file contains all features
+• AI-driven, all features use DeepSeek AI
+• Responsive design, supports desktop and mobile
+• Local storage, API Key is saved automatically
+
+
+═══════════════════════════════════════════════════════════════
+📞 Get Help
+═══════════════════════════════════════════════════════════════
+
+DeepSeek Official Website: https://platform.deepseek.com
+API Documentation: https://platform.deepseek.com/docs
+Console: https://platform.deepseek.com/usage
+
+
+═══════════════════════════════════════════════════════════════
+🎉 Get Started
+═══════════════════════════════════════════════════════════════
+
+Now double-click "start_app.command" or "index.html" to get started!
+
+Wishing you success in your job search and a prosperous career! 🚀✨
+
+
+═══════════════════════════════════════════════════════════════
+Version Information
+═══════════════════════════════════════════════════════════════
+
+Version: v2.0
+Update Date: November 2024
+AI Engine: DeepSeek
+License: MIT

QUICK_REFERENCE.md

@@ -0,0 +1,156 @@
+# 📋 CareerForge AI - Quick Reference Card
+
+## 🔑 First Time Use
+
+```
+1. Visit https://platform.deepseek.com
+2. Register → Create API Key → Top up ¥10
+3. Open index.html
+4. Paste the API Key at the top of the page
+5. Start using!
+```
+
+---
+
+## 📊 6 Core Features at a Glance
+
+| Feature | Input | Output | Time |
+|---|---|---|---|
+| 🎯 **Resume Optimization** | Personal Info + Job Description | Optimized Resume + Matching Analysis | 5-20s |
+| 💼 **Interview Coach** | Position + Level + Skills | Interview Questions + Answer Strategy | 5-15s |
+| 📚 **Learning Path** | Current Skills + Target Role | Learning Plan + Project Suggestions | 10-20s |
+| ✉️ **Cover Letter** | Company + Position + Achievement | Professional Cover Letter | 5-15s |
+| 💼 **LinkedIn** | Current Profile + Target | Optimized Profile + Hashtags | 5-15s |
+| 💰 **Salary Analysis** | Position + Location + Experience | Salary Range + Negotiation Strategy | 5-15s |
+
+---
+
+## 💡 Usage Tips
+
+### ✅ Do
+
+- **Resume**: Provide the complete job description
+- **Interview**: List all relevant skills
+- **Learning**: Detail your current skill level
+- **Cover Letter**: Describe specific achievement data
+- **LinkedIn**: Clearly define your target industry
+- **Salary**: Fill in accurate location and experience
+
+### ❌ Don't
+
+- Don't enter overly brief information
+- Don't frequently regenerate the same content
+- Don't save your API Key on a public computer
+- Don't share your API Key
+
+---
+
+## 💰 Cost Reference
+
+| Use Case | Monthly Usage | Monthly Cost |
+|---|---|---|
+| Intensive Job Search | 50 times | ¥0.5-1 |
+| Regular Optimization | 20 times | ¥0.2-0.5 |
+| Occasional Use | 5 times | ¥0.05-0.1 |
+
+**Conclusion: A ¥10 top-up will last a long time!**
+
+---
+
+## 🔧 Quick Troubleshooting
+
+| Issue | Solution |
+|---|---|
+| ❌ API Key not configured | Enter API Key at the top of the page |
+| ❌ 401 Error | Check if the API Key is correct |
+| ❌ Insufficient balance | Log in to DeepSeek to top up |
+| ❌ Generation failed | Check network, try again later |
+| ❌ Formatting issues | Refresh the page and regenerate |
+
+---
+
+## 🎯 Recommended Workflow
+
+### Complete Job Search Process
+
+```
+Step 1: Learning Path
+    ↓
+Assess skill gaps, start learning
+    ↓
+Step 2: Resume Optimization
+    ↓
+Customize resume for each position
+    ↓
+Step 3: Cover Letter
+    ↓
+Write a personalized cover letter
+    ↓
+Step 4: LinkedIn Optimization
+    ↓
+Build a professional online presence
+    ↓
+Step 5: Interview Preparation
+    ↓
+Prepare for interview questions and answers
+    ↓
+Step 6: Salary Analysis
+    ↓
+Understand the market, prepare for negotiation
+    ↓
+🎉 Successfully hired!
+```
+
+---
+
+## 📞 Quick Links
+
+- **DeepSeek Official Website**: https://platform.deepseek.com
+- **API Documentation**: https://platform.deepseek.com/docs
+- **Console**: https://platform.deepseek.com/usage
+
+---
+
+## 🔐 Security Tips
+
+✅ API Key is stored locally only
+✅ Not uploaded to third-party servers
+✅ Code is fully open-source and auditable
+⚠️ Change your API Key regularly
+⚠️ Do not use on public computers
+
+---
+
+## 🎓 Secrets to Improving Quality
+
+1. **The more detailed the input, the more accurate the output**
+2. **Generate multiple times, choose the best result**
+3. **AI generation is the foundation, manual optimization is key**
+4. **Save satisfactory results to avoid repeated consumption**
+5. **Adjust appropriately based on the actual situation**
+
+---
+
+## 📱 Status Indicators
+
+- ⚪ **Gray** - Not configured
+- 🔄 **Spinning** - Generating
+- ✅ **Green** - Success
+- ❌ **Red** - Failed
+
+---
+
+## 🚀 Get Started Now
+
+1. Open `index.html`
+2. Enter your API Key
+3. Choose a feature
+4. Fill in the information
+5. Click generate
+6. View the results
+
+**It's that simple!**
+
+---
+
+*Enjoy using it!* 🎉

README.md

@@ -1,11 +1,234 @@
+# 🚀 CareerForge AI - AI-Powered Career Development Platform
+
+> A comprehensive career development tool fully driven by AI to help you optimize your resume, prepare for interviews, plan your learning path, and more.
+
+<div align="center">
+
+![Status](https://img.shields.io/badge/status-active-success.svg)
+![AI](https://img.shields.io/badge/AI-DeepSeek-blue.svg)
+![License](https://img.shields.io/badge/license-MIT-green.svg)
+
+[Quick Start](#quick-start) • [Features](#features) • [User Guide](./INSTRUCTIONS.md)
+
+</div>
+
+---
+
+## ✨ Features
+
+This is a **purely frontend, zero-backend** AI application with 6 core features:
+
+### 🎯 1. Smart Resume
+Based on the job description, AI automatically generates an optimized resume and a matching analysis.
+
+### 💼 2. Interview Coach
+Generates interview questions, key points to assess, and answering strategies for a specific position.
+
+### 📚 3. Learning Path
+Based on your current skills and target position, AI plans a personalized learning path.
+
+### ✉️ 4. Cover Letter
+AI writes a professional, personalized cover letter.
+
+### 💼 5. LinkedIn Optimizer
+Optimizes your LinkedIn headline, summary, and personal brand.
+
+### 💰 6. Salary Intelligence
+Analyzes market salaries and provides negotiation strategies.
+
+---
+
+## 🚀 Quick Start
+
+### Step 1: Get API Key
+
+1. Visit [DeepSeek Official Website](https://platform.deepseek.com)
+2. Register and log in
+3. Go to the "API Keys" page and create a new key
+4. Copy the API Key
+5. Top up your account (¥10-20 recommended)
+
+### Step 2: Open the Application
+
+Double-click the `index.html` file to open the application in your browser.
+
+### Step 3: Configure API
+
+1. Find the "🔑 DeepSeek API Key" input box at the top of the page
+2. Paste your API Key
+3. A ✅ indicates successful configuration
+
+### Step 4: Start Using
+
+Select any feature tab, fill in the relevant information, and click the generate button!
+
+---
+
+## 📋 File Structure
+
+```
+CareerForge-AI/
+├── index.html          # Main application (single-file app)
+├── INSTRUCTIONS.md     # Detailed user guide
+└── README.md           # This file
+```
+
+---
+
+## 💰 Cost
+
+- **API Cost**: Approx. ¥0.005-0.02 / generation
+- **Top-up Suggestion**: ¥10 can be used for hundreds of generations
+- **Total Cost**: Extremely low, suitable for personal use
+
+---
+
+## 🎯 Use Cases
+
+### Job Seekers
+- Customize resumes for different positions
+- Prepare for interview questions and answers
+- Understand market salary trends
+
+### Career Planning
+- Assess skill gaps
+- Create a learning plan
+- Plan your career development path
+
+### Personal Branding
+- Optimize your LinkedIn profile
+- Write professional cover letters
+- Enhance your personal brand influence
+
+---
+
+## 🔐 Privacy & Security
+
+- ✅ API Key is saved only in your browser's local storage
+- ✅ Not uploaded to any third-party servers
+- ✅ All requests are sent directly to DeepSeek
+- ✅ Fully open-source, code is auditable
+
+---
+
+## 🛠️ Technical Features
+
+- **Pure Frontend Application** - No backend server required
+- **Single-File Application** - One HTML file contains all features
+- **AI-Driven** - All 6 features use DeepSeek AI
+- **Responsive Design** - Supports desktop and mobile
+- **Local Storage** - API Key is saved automatically
+
+---
+
+## 📖 Detailed Documentation
+
+Check out [INSTRUCTIONS.md](./INSTRUCTIONS.md) to learn about:
+- Detailed usage of each feature
+- Troubleshooting guide
+- Best practice recommendations
+- Advanced usage tips
+
+---
+
+## 🎓 Usage Tips
+
+### Writing High-Quality Input
+
+**Resume Optimization:**
+- Provide the complete job description
+- Include specific technical requirements
+- Explain the company background information
+
+**Interview Preparation:**
+- List all relevant skills
+- Include both soft and hard skills
+- Specify the job level
+
+**Learning Path:**
+- List your current skills in detail
+- Specify your skill proficiency
+- Clearly define your learning goals
+
 ---
-title: CareerForge AI
-emoji: 📈
-colorFrom: indigo
-colorTo: red
-sdk: docker
-pinned: false
-license: mit
+
+## ❓ FAQ
+
+### Q: How is the API Key saved?
+A: It is saved in your browser's localStorage, only locally, and will not be uploaded.
+
+### Q: How much does it cost?
+A: Each generation costs about ¥0.005-0.02. A ¥10 top-up will last a long time.
+
+### Q: Is an internet connection required?
+A: Yes, an internet connection is needed to call the DeepSeek API.
+
+### Q: Does it support other languages?
+A: It currently supports both Chinese and English input/output.
+
+### Q: Is my data secure?
+A: Very secure. All data is transmitted only between your browser and DeepSeek.
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 🔧 Troubleshooting
+
+### API Key Error
+1. Check if the API Key is copied completely
+2. Confirm it has been activated in the DeepSeek console
+3. Check if your account balance is sufficient
+
+### Generation Failed
+1. Check your internet connection
+2. Check the browser console for error messages (F12)
+3. Try again later
+
+### Content Formatting Issues
+1. Refresh the page and regenerate
+2. Simplify the input content
+3. Manually adjust the format
+
+---
+
+## 🚀 Version History
+
+### v2.0 (Current Version)
+- ✅ All 6 features are integrated with AI
+- ✅ Simplified to DeepSeek only
+- ✅ Optimized Prompt templates
+- ✅ Improved error handling
+- ✅ Enhanced Chinese support
+
+### v1.0
+- Initial version
+- Only the resume feature used AI
+
+---
+
+## 📞 Get Help
+
+- **DeepSeek Documentation**: [https://platform.deepseek.com/docs](https://platform.deepseek.com/docs)
+- **DeepSeek Console**: [https://platform.deepseek.com/usage](https://platform.deepseek.com/usage)
+
+---
+
+## 📄 License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+---
+
+## 🎉 Get Started
+
+Now open `index.html`, configure your API Key, and start using AI to boost your career development!
+
+**Wishing you success in your job search and a prosperous career!** 🚀✨
+
+---
+
+<div align="center">
+
+Made with ❤️ | Powered by DeepSeek AI
+
+</div>
+

app.py

@@ -0,0 +1,87 @@
+import os
+import httpx
+from fastapi import FastAPI, Request, HTTPException
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+
+# --- 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"
+
+# --- FastAPI App Initialization ---
+app = FastAPI()
+
+# Create a reusable HTTP client
+client = httpx.AsyncClient()
+
+# --- API Endpoint ---
+@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.
+    """
+    # Check if the API key is configured in HF Secrets
+    if not DEEPSEEK_API_KEY:
+        raise HTTPException(
+            status_code=500, 
+            detail="DEEPSEEK_API_KEY is not set on the server."
+        )
+        
+    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
+            headers=headers,
+            timeout=30.0    # Set a 30-second timeout
+        )
+        
+        # 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
+        print(f"Error from DeepSeek API: {e.response.text}")
+        raise HTTPException(
+            status_code=e.response.status_code, 
+            detail=e.response.text
+        )
+    except Exception as e:
+        # Handle any other unexpected errors
+        print(f"Internal server error: {str(e)}")
+        raise HTTPException(
+            status_code=500, 
+            detail=f"Internal server error: {str(e)}"
+        )
+
+# --- Static File Serving ---
+# Mount the 'static' directory to serve index.html and other assets
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/")
+async def read_root():
+    """
+    Serves the main index.html file from the 'static' directory.
+    """
+    try:
+        with open("static/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>", 
+            status_code=404
+        )

index.html

@@ -0,0 +1,1251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CareerForge AI - Complete Career Platform</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
+    <style>
+        /* Previous CSS styles remain the same */
+        :root {
+            --primary: #2563eb;
+            --primary-dark: #1d4ed8;
+            --secondary: #64748b;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --error: #ef4444;
+            --background: #f8fafc;
+            --surface: #ffffff;
+            --text: #1e293b;
+            --text-light: #64748b;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            color: var(--text);
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: var(--surface);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            padding: 40px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            font-weight: 700;
+        }
+
+        .tabs {
+            display: flex;
+            background: var(--background);
+            border-bottom: 1px solid #e2e8f0;
+            overflow-x: auto;
+        }
+
+        .tab-button {
+            padding: 20px 30px;
+            background: none;
+            border: none;
+            font-size: 1.1em;
+            font-weight: 600;
+            color: var(--text-light);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            white-space: nowrap;
+            border-bottom: 3px solid transparent;
+        }
+
+        .tab-button:hover {
+            color: var(--primary);
+            background: rgba(37, 99, 235, 0.05);
+        }
+
+        .tab-button.active {
+            color: var(--primary);
+            border-bottom-color: var(--primary);
+            background: white;
+        }
+
+        .tab-content {
+            display: none;
+            padding: 40px;
+            min-height: 600px;
+        }
+
+        .tab-content.active {
+            display: block;
+            animation: fadeIn 0.5s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .form-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+
+        .form-section {
+            background: var(--surface);
+            padding: 30px;
+            border-radius: 15px;
+            border: 1px solid #e2e8f0;
+        }
+
+        .form-section h3 {
+            margin-bottom: 20px;
+            color: var(--primary);
+            font-size: 1.3em;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: var(--text);
+        }
+
+        input, select, textarea {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e2e8f0;
+            border-radius: 10px;
+            font-size: 1em;
+            transition: border-color 0.3s ease;
+        }
+
+        input:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+
+        textarea {
+            resize: vertical;
+            min-height: 100px;
+        }
+
+        .btn {
+            padding: 15px 30px;
+            border: none;
+            border-radius: 10px;
+            font-size: 1.1em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .btn-primary {
+            background: var(--primary);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: var(--primary-dark);
+            transform: translateY(-2px);
+        }
+
+        .output-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-top: 30px;
+        }
+
+        .output-box {
+            background: var(--surface);
+            border: 1px solid #e2e8f0;
+            border-radius: 15px;
+            padding: 25px;
+            min-height: 400px;
+            max-height: 600px;
+            overflow-y: auto;
+        }
+
+        .output-box h3 {
+            margin-bottom: 15px;
+            color: var(--primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .resume-content {
+            line-height: 1.6;
+        }
+
+        .resume-content h1 {
+            color: var(--primary);
+            border-bottom: 3px solid var(--primary);
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+        }
+
+        .match-score {
+            font-size: 2em;
+            font-weight: bold;
+            text-align: center;
+            margin: 20px 0;
+            padding: 20px;
+            border-radius: 10px;
+            background: linear-gradient(135deg, var(--success), #34d399);
+            color: white;
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 15px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+
+        .question-item {
+            background: #f8fafc;
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 10px;
+            border-left: 4px solid var(--primary);
+        }
+
+        .skill-category {
+            margin: 20px 0;
+            padding: 15px;
+            background: #f0f9ff;
+            border-radius: 10px;
+        }
+
+        .salary-breakdown {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            margin: 20px 0;
+        }
+
+        .salary-item {
+            text-align: center;
+            padding: 15px;
+            background: #f8fafc;
+            border-radius: 10px;
+        }
+
+        .salary-value {
+            font-size: 1.5em;
+            font-weight: bold;
+            color: var(--primary);
+        }
+
+        @media (max-width: 768px) {
+            .form-grid, .output-grid {
+                grid-template-columns: 1fr;
+            }
+            .salary-breakdown {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚀 CareerForge AI</h1>
+            <p>Your All-in-One Intelligent Career Platform</p>
+            
+            <!-- API Configuration -->
+            <div style="margin-top: 25px; background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px; max-width: 700px; margin-left: auto; margin-right: auto;">
+                <div style="font-size: 0.95em; opacity: 0.95; line-height: 1.5; text-align: center;">
+                    💡 This platform is powered by AI. All features are now active.
+                    <span id="api-status" style="font-size: 1.2em; margin-left: 10px;">⚪</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="tabs">
+            <button class="tab-button active" onclick="openTab('resume-tab')">🎯 Smart Resume</button>
+            <button class="tab-button" onclick="openTab('interview-tab')">💼 Interview Coach</button>
+            <button class="tab-button" onclick="openTab('skills-tab')">📚 Learning Path</button>
+            <button class="tab-button" onclick="openTab('coverletter-tab')">✉️ Cover Letters</button>
+            <button class="tab-button" onclick="openTab('linkedin-tab')">💼 LinkedIn</button>
+            <button class="tab-button" onclick="openTab('salary-tab')">💰 Salary Intel</button>
+        </div>
+
+        <!-- Resume Optimizer Tab -->
+        <div id="resume-tab" class="tab-content active">
+            <div class="form-grid">
+                <div class="form-section">
+                    <h3>👤 Your Profile</h3>
+                    <div class="form-group">
+                        <label for="name">Full Name</label>
+                        <input type="text" id="name" placeholder="John Doe">
+                    </div>
+                    <div class="form-group">
+                        <label for="current-role">Current Role</label>
+                        <input type="text" id="current-role" placeholder="Software Developer">
+                    </div>
+                    <div class="form-group">
+                        <label for="experience">Years of Experience</label>
+                        <input type="number" id="experience" placeholder="5">
+                    </div>
+                    <div class="form-group">
+                        <label for="skills">Skills (comma separated)</label>
+                        <textarea id="skills" placeholder="Python, Project Management, Data Analysis..."></textarea>
+                    </div>
+                </div>
+
+                <div class="form-section">
+                    <h3>🎯 Target Opportunity</h3>
+                    <div class="form-group">
+                        <label for="job-title">Desired Job Title</label>
+                        <input type="text" id="job-title" placeholder="Senior Software Engineer">
+                    </div>
+                    <div class="form-group">
+                        <label for="job-description">Job Description</label>
+                        <textarea id="job-description" placeholder="Paste the job description here..."></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="company-name">Company Name</label>
+                        <input type="text" id="company-name" placeholder="Tech Company Inc.">
+                    </div>
+                </div>
+            </div>
+
+            <button class="btn btn-primary" onclick="generateResume()">🚀 Generate Optimized Resume</button>
+
+            <div class="output-grid">
+                <div class="output-box">
+                    <h3>📄 AI-Optimized Resume</h3>
+                    <div id="resume-output" class="resume-content"></div>
+                </div>
+                <div class="output-box">
+                    <h3>📊 Matching Analysis</h3>
+                    <div id="analysis-output"></div>
+                </div>
+            </div>
+
+            <div class="action-buttons">
+                <button class="btn btn-success" onclick="exportToPDF()">📥 Export as PDF</button>
+                <button class="btn btn-secondary" onclick="copyToClipboard('resume-output')">📋 Copy Text</button>
+            </div>
+        </div>
+
+        <!-- Interview Coach Tab -->
+        <div id="interview-tab" class="tab-content">
+            <div class="form-grid">
+                <div class="form-section">
+                    <h3>🎯 Interview Setup</h3>
+                    <div class="form-group">
+                        <label for="interview-role">Target Role</label>
+                        <input type="text" id="interview-role" placeholder="Senior Developer">
+                    </div>
+                    <div class="form-group">
+                        <label for="interview-level">Experience Level</label>
+                        <select id="interview-level">
+                            <option value="entry">Entry Level</option>
+                            <option value="mid">Mid Level</option>
+                            <option value="senior">Senior Level</option>
+                            <option value="lead">Lead/Manager</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="interview-skills">Key Skills to Test</label>
+                        <textarea id="interview-skills" placeholder="Python, System Design, Leadership..."></textarea>
+                    </div>
+                    <button class="btn btn-primary" onclick="generateInterviewQuestions()">🎯 Generate Questions</button>
+                </div>
+
+                <div class="form-section">
+                    <h3>💡 Interview Results</h3>
+                    <div id="interview-output"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Learning Path Tab -->
+        <div id="skills-tab" class="tab-content">
+            <div class="form-grid">
+                <div class="form-section">
+                    <h3>📚 Skill Assessment</h3>
+                    <div class="form-group">
+                        <label for="current-skills">Current Skills</label>
+                        <textarea id="current-skills" placeholder="List your current skills..."></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="target-role-learning">Target Role</label>
+                        <input type="text" id="target-role-learning" placeholder="AI Engineer">
+                    </div>
+                    <div class="form-group">
+                        <label for="timeline">Learning Timeline</label>
+                        <select id="timeline">
+                            <option value="3">3 months</option>
+                            <option value="6">6 months</option>
+                            <option value="12">1 year</option>
+                        </select>
+                    </div>
+                    <button class="btn btn-primary" onclick="generateLearningPath()">🛠️ Create Learning Path</button>
+                </div>
+
+                <div class="form-section">
+                    <h3>🎯 Personalized Roadmap</h3>
+                    <div id="learning-output"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Cover Letter Tab -->
+        <div id="coverletter-tab" class="tab-content">
+            <div class="form-grid">
+                <div class="form-section">
+                    <h3>✉️ Letter Details</h3>
+                    <div class="form-group">
+                        <label for="cl-company">Company Name</label>
+                        <input type="text" id="cl-company" placeholder="Tech Innovations Inc.">
+                    </div>
+                    <div class="form-group">
+                        <label for="cl-role">Job Title</label>
+                        <input type="text" id="cl-role" placeholder="Senior Developer">
+                    </div>
+                    <div class="form-group">
+                        <label for="cl-highlight">Key Achievement to Highlight</label>
+                        <textarea id="cl-highlight" placeholder="Describe your most relevant achievement..."></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="cl-tone">Writing Tone</label>
+                        <select id="cl-tone">
+                            <option value="professional">Professional</option>
+                            <option value="enthusiastic">Enthusiastic</option>
+                            <option value="formal">Formal</option>
+                        </select>
+                    </div>
+                    <button class="btn btn-primary" onclick="generateCoverLetter()">✨ Generate Cover Letter</button>
+                </div>
+
+                <div class="form-section">
+                    <h3>📝 Custom Cover Letter</h3>
+                    <div id="coverletter-output"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- LinkedIn Optimizer Tab -->
+        <div id="linkedin-tab" class="tab-content">
+            <div class="form-grid">
+                <div class="form-section">
+                    <h3>💼 Profile Information</h3>
+                    <div class="form-group">
+                        <label for="li-headline">Current Headline</label>
+                        <input type="text" id="li-headline" placeholder="Software Developer at Current Company">
+                    </div>
+                    <div class="form-group">
+                        <label for="li-about">Current About Section</label>
+                        <textarea id="li-about" placeholder="Your current LinkedIn summary..."></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="li-target">Target Industry/Roles</label>
+                        <input type="text" id="li-target" placeholder="AI Engineering, Tech Leadership">
+                    </div>
+                    <button class="btn btn-primary" onclick="optimizeLinkedIn()">🚀 Optimize Profile</button>
+                </div>
+
+                <div class="form-section">
+                    <h3>🎯 Optimized Results</h3>
+                    <div id="linkedin-output"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Salary Intelligence Tab -->
+        <div id="salary-tab" class="tab-content">
+            <div class="form-grid">
+                <div class="form-section">
+                    <h3>💰 Salary Research</h3>
+                    <div class="form-group">
+                        <label for="salary-role">Job Title</label>
+                        <input type="text" id="salary-role" placeholder="Senior Software Engineer">
+                    </div>
+                    <div class="form-group">
+                        <label for="salary-location">Location</label>
+                        <input type="text" id="salary-location" placeholder="San Francisco, CA or Remote">
+                    </div>
+                    <div class="form-group">
+                        <label for="salary-experience">Years of Experience</label>
+                        <input type="number" id="salary-experience" placeholder="5">
+                    </div>
+                    <div class="form-group">
+                        <label for="salary-company">Company Size</label>
+                        <select id="salary-company">
+                            <option value="startup">Startup (1-50)</option>
+                            <option value="small">Small (51-200)</option>
+                            <option value="medium">Medium (201-1000)</option>
+                            <option value="large">Large (1001-5000)</option>
+                            <option value="enterprise">Enterprise (5000+)</option>
+                        </select>
+                    </div>
+                    <button class="btn btn-primary" onclick="analyzeSalary()">💡 Get Salary Insights</button>
+                </div>
+
+                <div class="form-section">
+                    <h3>📊 Market Intelligence</h3>
+                    <div id="salary-output"></div>
+                </div>
+            </div>
+        </div>
+    </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');
+            const tabButtons = document.getElementsByClassName('tab-button');
+            
+            for (let i = 0; i < tabContents.length; i++) {
+                tabContents[i].classList.remove('active');
+                tabButtons[i].classList.remove('active');
+            }
+
+            document.getElementById(tabName).classList.add('active');
+            event.currentTarget.classList.add('active');
+        }
+
+        // 1. RESUME OPTIMIZER - ACTUAL FUNCTIONALITY
+        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 resumeOutput = document.getElementById('resume-output');
+            const analysisOutput = document.getElementById('analysis-output');
+            resumeOutput.innerHTML = '<p>🚀 Generating AI-Optimized Resume...</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 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>';
+                analysisOutput.innerHTML = '<p style="color: red;">❌ Generation failed</p>';
+            }
+        }
+
+        // 2. INTERVIEW COACH - AI-POWERED FUNCTIONALITY
+        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 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.';
+
+            try {
+                const aiReply = await callLLM(prompt, systemPrompt);
+                // 直接使用 AI 返回的 HTML
+                outputDiv.innerHTML = aiReply;
+            } catch (error) {
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+            }
+        }
+
+        // 3. LEARNING PATH - AI-POWERED FUNCTIONALITY
+        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 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.';
+
+            try {
+                const aiReply = await callLLM(prompt, systemPrompt);
+                outputDiv.innerHTML = aiReply;
+            } catch (error) {
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+            }
+        }
+
+        // 4. COVER LETTER GENERATOR - AI-POWERED FUNCTIONALITY
+        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 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.';
+
+            try {
+                const aiReply = await callLLM(prompt, systemPrompt);
+                outputDiv.innerHTML = aiReply;
+            } catch (error) {
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+            }
+        }
+
+        // 5. LINKEDIN OPTIMIZER - AI-POWERED FUNCTIONALITY
+        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 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.';
+
+            try {
+                const aiReply = await callLLM(prompt, systemPrompt);
+                outputDiv.innerHTML = aiReply;
+            } catch (error) {
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</p>';
+            }
+        }
+
+        // 6. SALARY INTELLIGENCE - AI-ENHANCED FUNCTIONALITY
+        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 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.';
+
+
+            try {
+                const aiReply = await callLLM(prompt, systemPrompt);
+                outputDiv.innerHTML = aiReply;
+            } catch (error) {
+                outputDiv.innerHTML = '<p style="color: red;">❌ Generation failed, please check API configuration</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 = {
+                margin: 10,
+                filename: 'optimized_resume.pdf',
+                image: { type: 'jpeg', quality: 0.98 },
+                html2canvas: { scale: 2 },
+                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
+            };
+            html2pdf().set(opt).from(element).save();
+        }
+
+        function copyToClipboard(elementId) {
+            const element = document.getElementById(elementId);
+            const text = element.innerText;
+            navigator.clipboard.writeText(text).then(() => {
+                alert('Copied to clipboard!');
+            });
+        }
+
+        // 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...");
+
+            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', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(requestBody) // Send the JSON payload
+                });
+
+                if (!response.ok) {
+                    // Get error detail from our FastAPI backend
+                    const errorData = await response.json().catch(() => ({}));
+                    if (statusIcon) statusIcon.textContent = '❌';
+                    throw new Error(errorData.detail || `Server Error ${response.status}: ${response.statusText}`);
+                }
+
+                // The 'data' is the full response from DeepSeek,
+                // proxied through our backend
+                const data = 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;
+
+            } 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.`);
+                
+                throw error;
+            }
+        }
+
+        // 解析 JSON 响应的辅助函数
+        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 {
+                        return JSON.parse(jsonMatch[0]);
+                    } catch (e) {
+                        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';
+            document.getElementById('skills').value = 'React, TypeScript, JavaScript ES6+, Redux, Node.js, RESTful APIs, GraphQL, AWS, Docker, Webpack, Jest, Agile Methodology, Team Leadership, Code Review, Performance Optimization';
+            document.getElementById('job-title').value = 'Principal Frontend Engineer';
+            document.getElementById('company-name').value = 'InnovateTech Solutions';
+            document.getElementById('job-description').value = `We are seeking an experienced Principal Frontend Engineer to lead our frontend development team. The ideal candidate will have 6+ years of experience building scalable web applications and a deep understanding of modern JavaScript frameworks.
+
+Responsibilities:
+- Lead and mentor a team of 8 frontend developers
+- Architect and implement complex frontend systems using React and TypeScript
+- Collaborate with product managers and designers to define technical requirements
+- Optimize applications for maximum performance and scalability
+- Establish and enforce coding standards and best practices
+- Conduct code reviews and provide constructive feedback
+- Drive technical innovation and stay current with industry trends
+
+Requirements:
+- 6+ years of professional frontend development experience
+- Expertise in React, TypeScript, and modern JavaScript
+- Strong experience with state management (Redux, Context API)
+- Proficiency in build tools (Webpack, Babel) and testing frameworks
+- Experience with cloud platforms (AWS, Azure, or GCP)
+- Excellent leadership and communication skills
+- Bachelor's degree in Computer Science or related field`;
+
+            document.getElementById('interview-role').value = 'Senior Full Stack Developer';
+            document.getElementById('interview-skills').value = 'Technical: React, Node.js, PostgreSQL, AWS, Docker, Microservices, System Design\nBehavioral: Team Leadership, Project Management, Conflict Resolution, Stakeholder Communication\nArchitecture: API Design, Database Optimization, Cloud Infrastructure, CI/CD Pipelines';
+            document.getElementById('current-skills').value = 'JavaScript (Advanced), React (Intermediate), HTML/CSS (Advanced), Node.js (Basic), MongoDB (Basic), Git (Intermediate), REST APIs (Intermediate)';
+            document.getElementById('target-role-learning').value = 'Full Stack Developer';
+            document.getElementById('cl-company').value = 'TechNova Innovations';
+            document.getElementById('cl-role').value = 'Senior Software Engineer';
+            document.getElementById('cl-highlight').value = 'Led the development of a customer dashboard that improved user engagement by 45% and reduced loading time by 60%. Implemented React with TypeScript and optimized API calls, resulting in a 30% decrease in server costs. Managed a team of 3 junior developers and introduced code review processes that reduced bugs in production by 25%.';
+            document.getElementById('li-headline').value = 'Frontend Developer at Current Company';
+            document.getElementById('li-about').value = `I'm a frontend developer with experience in React and JavaScript. I enjoy building web applications and solving technical challenges. Looking for new opportunities in tech.`;
+            document.getElementById('li-target').value = 'Tech Leadership, Senior Engineering Roles, FinTech';
+            document.getElementById('salary-role').value = 'Senior Software Engineer';
+            document.getElementById('salary-location').value = 'San Francisco, CA';
+            document.getElementById('salary-experience').value = '6';
+        });
+
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,3 @@
+fastapi
+uvicorn[standard]
+httpx