📁 Your AI Reads Everything!

Your AI can chat, create images, and understand speech. Now let’s make it read and analyze documents like a pro! 📝

Imagine users uploading a 50-page financial report and your AI instantly saying: “Revenue is up 23%, but costs increased 15%. The biggest risk is in Q4 projections.” Or analyzing code files for bugs and improvements!

What we’re building: Your AI becomes a document analysis expert that can read PDFs, Excel files, Word docs, code files, and extract insights that save hours of manual work!

---

🎯 From File-Blind AI to Document Genius

Current state: Your AI handles text, images, and audio perfectly Target state: Your AI reads and analyzes any document type!

🔄 The Document Intelligence Transformation

Before (File-Blind AI):

User: [Uploads financial report] "What are the key insights?"
AI: "I can't read file attachments" 😑

After (Document Genius AI):

User: [Uploads financial report] "What are the key insights?"
AI: "This Q3 report shows 18% revenue growth ($4.2M), but operating costs rose 12%. Key risk: Customer acquisition cost increased 25%. Recommendation: Focus on retention strategies." 📊

The magic: Your AI becomes a professional analyst that reads faster and more accurately than humans!

🚀 Why File Analysis Changes Everything

Real-world scenarios your AI will handle:

• 📈 Financial reports - “Revenue is up, but watch Q4 cash flow risks”
• 📝 Legal contracts - “Key terms: 3-year duration, 30-day cancellation clause”
• 📊 Spreadsheets - “Sales peak in December, lowest margin in March”
• 💻 Code files - “Function is efficient but missing error handling”
• 📄 Research papers - “Study shows 34% improvement, sample size: 1,200”

Without file AI:

❌ Hours reading documents manually
❌ Miss critical insights buried in data
❌ Error-prone manual extraction
❌ Can't handle multiple file types

With file AI:

✅ Instant professional analysis
✅ Spot patterns humans miss
✅ Handle PDFs, Excel, Word, code
✅ Extract structured data perfectly

File Types Your AI Can Handle

Your file analyzer will support all major file formats:

📄 Documents - PDF, Word (.docx), Text files, Markdown

• Best for: Reports, contracts, articles, documentation
• AI extracts: Key points, summaries, important dates and names

📊 Spreadsheets - Excel (.xlsx), CSV files

• Best for: Data analysis, financial reports, inventory lists
• AI extracts: Trends, calculations, anomalies, insights

💻 Code Files - JavaScript, Python, Java, SQL, JSON

• Best for: Code review, documentation, analysis
• AI extracts: Function analysis, quality assessment, suggestions

🔧 Data Files - JSON, XML, configuration files

• Best for: Settings analysis, data structure review
• AI extracts: Structure analysis, validation, optimization tips

We’ll start with support for the most common file types, and you can easily extend it later for specialized formats.

---

🔧 Step 2: Adding File Analysis to Your Backend

Let’s add file analysis to your existing backend using the same patterns you learned in Module 1. We’ll add new routes to handle file uploads and AI analysis.

Building on your foundation: You already have a working Node.js server with OpenAI integration. We’re simply adding file processing capabilities to what you’ve built.

Step 2A: Understanding File Processing State

Before writing code, let’s understand what data our file analysis system needs to manage:

// 🧠 FILE ANALYSIS STATE CONCEPTS:
// 1. File Upload - The uploaded file data and metadata
// 2. File Content - Extracted text or data from the file
// 3. Analysis Settings - Type of analysis requested by user
// 4. AI Results - Processed insights and extracted information
// 5. Error States - Invalid files, processing failures, file size limits

Key file analysis concepts:

• File Types: Different parsing methods for PDFs, Excel, Word, etc.
• Content Extraction: Converting files to text that AI can analyze
• Analysis Modes: Summary, detailed analysis, or data extraction
• Results Structure: Organized output that’s easy to display

Step 2B: Installing Required Dependencies

First, add the file processing dependencies to your backend. In your backend folder, run:

npm install multer mammoth xlsx pdf-parse

What these packages do:

• multer: Handles file uploads in Express applications
• mammoth: Extracts text from Word documents (.docx)
• xlsx: Processes Excel spreadsheets and CSV files
• pdf-parse: Extracts text content from PDF files

Step 2C: Adding the File Analysis Route

Add this new endpoint to your existing index.js file, right after your audio transcription routes:

import multer from 'multer';
import mammoth from 'mammoth';
import * as XLSX from 'xlsx';
import pdf from 'pdf-parse';
import fs from 'fs';
import path from 'path';

// 📁 MULTER SETUP: Configure file upload handling
const upload = multer({
  storage: multer.memoryStorage(),
  limits: {
    fileSize: 25 * 1024 * 1024 // 25MB limit
  },
  fileFilter: (req, file, cb) => {
    // Accept common file types
    const allowedTypes = [
      'application/pdf',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'text/plain',
      'text/csv',
      'application/json',
      'text/javascript',
      'text/x-python'
    ];

    // Also allow based on file extension
    const extension = path.extname(file.originalname).toLowerCase();
    const allowedExtensions = ['.pdf', '.docx', '.xlsx', '.csv', '.txt', '.md', '.json', '.js', '.py'];

    if (allowedTypes.includes(file.mimetype) || allowedExtensions.includes(extension)) {
      cb(null, true);
    } else {
      cb(new Error('Only PDF, Word, Excel, CSV, Text, and Code files are allowed'), false);
    }
  }
});

// 🔧 HELPER FUNCTIONS: File processing utilities
const extractFileContent = async (file) => {
  const extension = path.extname(file.originalname).toLowerCase();

  try {
    switch (extension) {
      case '.pdf':
        // Extract text from PDF
        const pdfData = await pdf(file.buffer);
        return {
          text: pdfData.text,
          pages: pdfData.numpages,
          type: 'pdf'
        };

      case '.docx':
        // Extract text from Word document
        const wordResult = await mammoth.extractRawText({ buffer: file.buffer });
        return {
          text: wordResult.value,
          type: 'word'
        };

      case '.xlsx':
        // Process Excel file
        const workbook = XLSX.read(file.buffer, { type: 'buffer' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const csvData = XLSX.utils.sheet_to_csv(worksheet);
        return {
          text: csvData,
          sheets: workbook.SheetNames,
          type: 'excel'
        };

      case '.csv':
        // Process CSV file
        const csvText = file.buffer.toString('utf-8');
        return {
          text: csvText,
          type: 'csv'
        };

      case '.json':
        // Process JSON file
        const jsonText = file.buffer.toString('utf-8');
        const jsonData = JSON.parse(jsonText);
        return {
          text: JSON.stringify(jsonData, null, 2),
          data: jsonData,
          type: 'json'
        };

      default:
        // Handle as text file
        const textContent = file.buffer.toString('utf-8');
        return {
          text: textContent,
          type: 'text'
        };
    }
  } catch (error) {
    console.error(`Error processing ${extension} file:`, error);
    throw new Error(`Failed to process ${extension} file: ${error.message}`);
  }
};

const generateAnalysisPrompt = (fileType, analysisType, content) => {
  const basePrompt = `You are an expert file analyst. Analyze this ${fileType} file and provide insights.`;

  switch (analysisType) {
    case 'summary':
      return `${basePrompt} Provide a clear summary including:
      1. KEY POINTS: Main topics and important information
      2. IMPORTANT DATA: Key numbers, dates, names, and values
      3. ACTION ITEMS: Any tasks or next steps mentioned
      4. INSIGHTS: Notable patterns or observations

      Keep it concise and actionable.`;

    case 'detailed':
      return `${basePrompt} Provide detailed analysis including:
      1. STRUCTURE: How the document is organized
      2. CONTENT ANALYSIS: Detailed breakdown of all sections
      3. DATA EXTRACTION: All important numbers, dates, and metrics
      4. BUSINESS INSIGHTS: Trends, opportunities, and recommendations
      5. QUALITY ASSESSMENT: Completeness and reliability of information

      Be thorough and comprehensive.`;

    case 'extract':
      return `${basePrompt} Extract and structure all key data including:
      1. CONTACT INFORMATION: Names, emails, phone numbers, addresses
      2. FINANCIAL DATA: Numbers, amounts, percentages, calculations
      3. DATES AND TIMES: All temporal information
      4. KEY METRICS: Performance indicators, statistics, measurements
      5. ACTION ITEMS: Tasks, deadlines, responsibilities

      Format as structured data with clear categories.`;

    default:
      return `${basePrompt} Analyze this file and provide useful insights about its content, structure, and key information.`;
  }
};

// 📁 AI File Analysis endpoint - add this to your existing server
app.post("/api/files/analyze", upload.single("file"), async (req, res) => {
  let tempFilePath = null;

  try {
    // 🛡️ VALIDATION: Check if file was uploaded
    const uploadedFile = req.file;
    const { analysisType = "summary" } = req.body; // summary, detailed, or extract

    if (!uploadedFile) {
      return res.status(400).json({
        error: "No file uploaded",
        success: false
      });
    }

    console.log(`📁 Analyzing: ${uploadedFile.originalname} (${uploadedFile.size} bytes)`);

    // 📄 CONTENT EXTRACTION: Process file based on type
    const extractedContent = await extractFileContent(uploadedFile);

    // Limit content size for API call (10,000 characters max)
    const contentForAnalysis = extractedContent.text.substring(0, 10000);
    if (extractedContent.text.length > 10000) {
      console.log(`Content truncated from ${extractedContent.text.length} to 10,000 characters`);
    }

    // 🤖 AI ANALYSIS: Process with OpenAI
    const analysisPrompt = generateAnalysisPrompt(extractedContent.type, analysisType, contentForAnalysis);

    const response = await openai.responses.create({
      model: "gpt-4o-mini",
      input: [
        {
          role: "system",
          content: analysisPrompt
        },
        {
          role: "user",
          content: `File: ${uploadedFile.originalname}\nContent:\n${contentForAnalysis}`
        }
      ]
    });

    // 📤 SUCCESS RESPONSE: Send analysis results
    res.json({
      success: true,
      file_info: {
        name: uploadedFile.originalname,
        size: uploadedFile.size,
        type: extractedContent.type,
        content_length: extractedContent.text.length
      },
      analysis: {
        type: analysisType,
        result: response.output_text,
        model: "gpt-4o-mini"
      },
      metadata: {
        pages: extractedContent.pages,
        sheets: extractedContent.sheets,
        timestamp: new Date().toISOString()
      }
    });

  } catch (error) {
    // 🚨 ERROR HANDLING: Handle processing failures
    console.error("File analysis error:", error);

    res.status(500).json({
      error: "Failed to analyze file",
      details: error.message,
      success: false
    });
  }
});

Function breakdown:

1. File validation - Ensure valid file type and size
2. Content extraction - Parse different file formats appropriately
3. Content preparation - Format and limit content for AI analysis
4. AI analysis - Generate insights based on analysis type
5. Response formatting - Return structured results with metadata

Step 2D: Adding Error Handling for File Uploads

Add this middleware to handle file upload errors:

// 🚨 FILE UPLOAD ERROR HANDLING: Handle multer errors
app.use((error, req, res, next) => {
  if (error instanceof multer.MulterError) {
    if (error.code === 'LIMIT_FILE_SIZE') {
      return res.status(400).json({
        error: "File too large. Maximum size is 25MB.",
        success: false
      });
    }
    return res.status(400).json({
      error: error.message,
      success: false
    });
  }

  if (error.message.includes('Only PDF, Word, Excel')) {
    return res.status(400).json({
      error: "Unsupported file type. Please upload PDF, Word, Excel, CSV, Text, or Code files.",
      success: false
    });
  }

  next(error);
});

Your backend now supports:

• Text chat (existing functionality)
• Streaming chat (existing functionality)
• Image generation (existing functionality)
• Audio transcription (existing functionality)
• File analysis (new functionality)

---

## 🔧 Step 3: Building the React File Analysis Component

Now let's create a React component for file analysis using the same patterns from your existing components.

### **Step 3A: Creating the File Analysis Component**

Create a new file `src/FileAnalysis.jsx`:

```jsx
import { useState, useRef } from "react";
import { Upload, FileText, Download, Folder, BarChart3 } from "lucide-react";

function FileAnalysis() {
  // 🧠 STATE: File analysis data management
  const [selectedFile, setSelectedFile] = useState(null);          // Uploaded file
  const [analysisType, setAnalysisType] = useState("summary");     // Analysis mode
  const [isAnalyzing, setIsAnalyzing] = useState(false);           // Processing status
  const [analysisResult, setAnalysisResult] = useState(null);      // Analysis results
  const [error, setError] = useState(null);                        // Error messages
  const fileInputRef = useRef(null);

  // 🔧 FUNCTIONS: File analysis logic engine

  // Handle file selection
  const handleFileSelect = (event) => {
    const file = event.target.files[0];
    if (file) {
      // Validate file size (25MB limit)
      if (file.size > 25 * 1024 * 1024) {
        setError('File too large. Maximum size is 25MB.');
        return;
      }

      // Validate file type
      const allowedExtensions = ['.pdf', '.docx', '.xlsx', '.csv', '.txt', '.md', '.json', '.js', '.py'];
      const extension = '.' + file.name.split('.').pop().toLowerCase();

      if (!allowedExtensions.includes(extension)) {
        setError('Unsupported file type. Please upload PDF, Word, Excel, CSV, Text, or Code files.');
        return;
      }

      setSelectedFile(file);
      setAnalysisResult(null);
      setError(null);
    }
  };

  // Clear selected file
  const clearFile = () => {
    setSelectedFile(null);
    setAnalysisResult(null);
    setError(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  // Main file analysis function
  const analyzeFile = async () => {
    // 🛡️ GUARDS: Prevent invalid analysis
    if (!selectedFile || isAnalyzing) return;

    // 🔄 SETUP: Prepare for analysis
    setIsAnalyzing(true);
    setError(null);
    setAnalysisResult(null);

    try {
      // 📤 FORM DATA: Prepare multipart form data
      const formData = new FormData();
      formData.append('file', selectedFile);
      formData.append('analysisType', analysisType);

      // 📡 API CALL: Send to your backend
      const response = await fetch("http://localhost:8000/api/files/analyze", {
        method: "POST",
        body: formData
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Failed to analyze file');
      }

      // ✅ SUCCESS: Store analysis results
      setAnalysisResult(data);

    } catch (error) {
      // 🚨 ERROR HANDLING: Show user-friendly message
      console.error('File analysis failed:', error);
      setError(error.message || 'Something went wrong while analyzing the file');
    } finally {
      // 🧹 CLEANUP: Reset processing state
      setIsAnalyzing(false);
    }
  };

  // Download analysis results
  const downloadAnalysis = () => {
    if (!analysisResult) return;

    const element = document.createElement('a');
    const file = new Blob([JSON.stringify(analysisResult, null, 2)], { type: 'application/json' });
    element.href = URL.createObjectURL(file);
    element.download = `analysis-${selectedFile.name}-${Date.now()}.json`;
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };

  // Analysis type options
  const analysisTypes = [
    { value: "summary", label: "Summary Analysis", desc: "Key points and quick insights" },
    { value: "detailed", label: "Detailed Analysis", desc: "Comprehensive breakdown and insights" },
    { value: "extract", label: "Data Extraction", desc: "Extract structured data and metrics" }
  ];

  // File type helpers
  const getFileIcon = (fileName) => {
    const extension = fileName.split('.').pop().toLowerCase();
    switch (extension) {
      case 'pdf': return '📄';
      case 'docx': return '📝';
      case 'xlsx': return '📊';
      case 'csv': return '📈';
      case 'txt': case 'md': return '📋';
      case 'json': return '🔧';
      case 'js': return '📜';
      case 'py': return '🐍';
      default: return '📁';
    }
  };

  const formatFileSize = (bytes) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  // 🎨 UI: Interface components
  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl flex flex-col overflow-hidden">

        {/* Header */}
        <div className="bg-gradient-to-r from-green-600 to-blue-600 text-white p-6">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
              <Folder className="w-5 h-5" />
            </div>
            <div>
              <h1 className="text-xl font-bold">📁 AI File Analysis</h1>
              <p className="text-green-100 text-sm">Analyze any file with AI intelligence!</p>
            </div>
          </div>
        </div>

        {/* Analysis Options Section */}
        <div className="p-6 border-b border-gray-200">
          <h3 className="font-semibold text-gray-900 mb-4 flex items-center">
            <BarChart3 className="w-5 h-5 mr-2 text-green-600" />
            Analysis Type
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {analysisTypes.map((type) => (
              <button
                key={type.value}
                onClick={() => setAnalysisType(type.value)}
                className={`p-4 rounded-lg border-2 text-left transition-all duration-200 ${
                  analysisType === type.value
                    ? 'border-green-500 bg-green-50 shadow-md'
                    : 'border-gray-200 hover:border-green-300 hover:bg-green-50'
                }`}
              >
                <h4 className="font-medium text-gray-900 mb-1">{type.label}</h4>
                <p className="text-sm text-gray-600">{type.desc}</p>
              </button>
            ))}
          </div>
        </div>

        {/* File Upload Section */}
        <div className="p-6 border-b border-gray-200">
          <h3 className="font-semibold text-gray-900 mb-4 flex items-center">
            <Upload className="w-5 h-5 mr-2 text-green-600" />
            Upload File for Analysis
          </h3>

          {!selectedFile ? (
            <div
              onClick={() => fileInputRef.current?.click()}
              className="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-green-400 hover:bg-green-50 transition-colors duration-200"
            >
              <Upload className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h4 className="text-lg font-semibold text-gray-700 mb-2">Upload File</h4>
              <p className="text-gray-600 mb-4">
                Support for PDF, Word, Excel, CSV, Text, JSON, and Code files up to 25MB
              </p>
              <button className="px-6 py-3 bg-gradient-to-r from-green-600 to-blue-600 text-white rounded-xl hover:from-green-700 hover:to-blue-700 transition-all duration-200 inline-flex items-center space-x-2 shadow-lg">
                <Upload className="w-4 h-4" />
                <span>Choose File</span>
              </button>
            </div>
          ) : (
            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center space-x-3">
                  <span className="text-3xl">{getFileIcon(selectedFile.name)}</span>
                  <div>
                    <h4 className="font-medium text-gray-900">{selectedFile.name}</h4>
                    <p className="text-sm text-gray-600">{formatFileSize(selectedFile.size)}</p>
                  </div>
                </div>
                <button
                  onClick={clearFile}
                  className="p-2 text-gray-400 hover:text-red-600 transition-colors duration-200"
                >
                  ×
                </button>
              </div>

              <button
                onClick={analyzeFile}
                disabled={isAnalyzing}
                className="w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 disabled:from-gray-300 disabled:to-gray-300 text-white px-6 py-3 rounded-lg transition-all duration-200 flex items-center justify-center space-x-2 shadow-lg disabled:shadow-none"
              >
                {isAnalyzing ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    <span>Analyzing...</span>
                  </>
                ) : (
                  <>
                    <FileText className="w-4 h-4" />
                    <span>Analyze File</span>
                  </>
                )}
              </button>
            </div>
          )}

          <input
            ref={fileInputRef}
            type="file"
            accept=".pdf,.docx,.xlsx,.csv,.txt,.md,.json,.js,.py"
            onChange={handleFileSelect}
            className="hidden"
          />
        </div>

        {/* Results Section */}
        <div className="flex-1 p-6">
          {/* Error Display */}
          {error && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
              <p className="text-red-700">
                <strong>Error:</strong> {error}
              </p>
            </div>
          )}

          {/* Analysis Results */}
          {analysisResult ? (
            <div className="bg-gray-50 rounded-lg p-4">
              <div className="flex items-center justify-between mb-4">
                <h4 className="font-semibold text-gray-900">Analysis Results</h4>
                <button
                  onClick={downloadAnalysis}
                  className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2"
                >
                  <Download className="w-4 h-4" />
                  <span>Download</span>
                </button>
              </div>

              <div className="space-y-4">
                {/* File Information */}
                <div className="bg-white rounded-lg p-4">
                  <h5 className="font-medium text-gray-700 mb-2">File Information:</h5>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                    <div>
                      <span className="text-gray-600">Name:</span>
                      <p className="font-medium">{analysisResult.file_info.name}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Size:</span>
                      <p className="font-medium">{formatFileSize(analysisResult.file_info.size)}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Type:</span>
                      <p className="font-medium">{analysisResult.file_info.type}</p>
                    </div>
                    <div>
                      <span className="text-gray-600">Analysis:</span>
                      <p className="font-medium capitalize">{analysisResult.analysis.type}</p>
                    </div>
                  </div>
                </div>

                {/* Analysis Content */}
                <div className="bg-white rounded-lg p-4">
                  <h5 className="font-medium text-gray-700 mb-2">AI Analysis:</h5>
                  <div className="text-gray-900 leading-relaxed whitespace-pre-wrap max-h-96 overflow-y-auto">
                    {analysisResult.analysis.result}
                  </div>
                </div>
              </div>
            </div>
          ) : !isAnalyzing && !error && (
            // Welcome State
            <div className="text-center py-12">
              <div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <FileText className="w-8 h-8 text-green-600" />
              </div>
              <h3 className="text-lg font-semibold text-gray-700 mb-2">
                Ready to Analyze!
              </h3>
              <p className="text-gray-600 max-w-md mx-auto">
                Upload any file to get AI-powered insights, summaries, and intelligent analysis.
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default FileAnalysis;

Step 3B: Adding File Analysis to Navigation

Update your src/App.jsx to include the new file analysis component:

import { useState } from "react";
import StreamingChat from "./StreamingChat";
import ImageGenerator from "./ImageGenerator";
import AudioTranscription from "./AudioTranscription";
import FileAnalysis from "./FileAnalysis";
import { MessageSquare, Image, Mic, Folder } from "lucide-react";

function App() {
  // 🧠 STATE: Navigation management
  const [currentView, setCurrentView] = useState("chat"); // 'chat', 'images', 'audio', or 'files'

  // 🎨 UI: Main app with navigation
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Navigation Header */}
      <nav className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-6xl mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <div className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-sm">AI</span>
              </div>
              <h1 className="text-xl font-bold text-gray-900">OpenAI Mastery</h1>
            </div>

            {/* Navigation Buttons */}
            <div className="flex space-x-2">
              <button
                onClick={() => setCurrentView("chat")}
                className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-all duration-200 ${
                  currentView === "chat"
                    ? "bg-blue-100 text-blue-700 shadow-sm"
                    : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
                }`}
              >
                <MessageSquare className="w-4 h-4" />
                <span>Chat</span>
              </button>

              <button
                onClick={() => setCurrentView("images")}
                className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-all duration-200 ${
                  currentView === "images"
                    ? "bg-purple-100 text-purple-700 shadow-sm"
                    : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
                }`}
              >
                <Image className="w-4 h-4" />
                <span>Images</span>
              </button>

              <button
                onClick={() => setCurrentView("audio")}
                className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-all duration-200 ${
                  currentView === "audio"
                    ? "bg-blue-100 text-blue-700 shadow-sm"
                    : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
                }`}
              >
                <Mic className="w-4 h-4" />
                <span>Audio</span>
              </button>

              <button
                onClick={() => setCurrentView("files")}
                className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-all duration-200 ${
                  currentView === "files"
                    ? "bg-green-100 text-green-700 shadow-sm"
                    : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"
                }`}
              >
                <Folder className="w-4 h-4" />
                <span>Files</span>
              </button>
            </div>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className="h-[calc(100vh-4rem)]">
        {currentView === "chat" && <StreamingChat />}
        {currentView === "images" && <ImageGenerator />}
        {currentView === "audio" && <AudioTranscription />}
        {currentView === "files" && <FileAnalysis />}
      </main>
    </div>
  );
}

export default App;

---

🧪 Testing Your File Analysis

Let’s test your file analysis feature step by step to make sure everything works correctly.

Step 1: Backend Route Test

First, verify your backend route works by testing it directly:

Test with a simple text file:

# Create a test file
echo "This is a test document with important information about quarterly sales increasing by 25% in Q3 2024." > test.txt

# Test the endpoint
curl -X POST http://localhost:8000/api/files/analyze \
  -F "file=@test.txt" \
  -F "analysisType=summary"

Expected response:

{
  "success": true,
  "file_info": {
    "name": "test.txt",
    "size": 98,
    "type": "text",
    "content_length": 98
  },
  "analysis": {
    "type": "summary",
    "result": "KEY POINTS: Document discusses quarterly sales performance...\nIMPORTANT DATA: 25% increase in Q3 2024...\nACTION ITEMS: Monitor continued growth...",
    "model": "gpt-4o-mini"
  }
}

Step 2: Full Application Test

Start both servers:

Backend (in your backend folder):

npm run dev

Frontend (in your frontend folder):

npm run dev

Test the complete flow:

1. Navigate to Files → Click the “Files” tab in navigation
2. Select analysis type → Choose “Summary Analysis” or “Detailed Analysis”
3. Upload a file → Try a PDF, Word document, or text file
4. Analyze → Click “Analyze File” and see loading state
5. View results → See AI analysis with file information
6. Download → Test downloading analysis as JSON file
7. Switch files → Try different file types and analysis modes

Step 3: Error Handling Test

Test error scenarios:

❌ Large file: Upload file larger than 25MB
❌ Wrong type: Upload unsupported file (like .exe or .dmg)
❌ Empty file: Upload empty file
❌ Corrupt file: Upload damaged file

Expected behavior:

• Clear error messages displayed
• No application crashes
• User can try again with different file
• File upload resets properly after errors

---

✅ What You Built

Congratulations! You’ve extended your existing application with complete AI file analysis:

• ✅ Extended your backend with file processing and AI analysis routes
• ✅ Added React file component following the same patterns as your other features
• ✅ Implemented intelligent file parsing for PDFs, Word, Excel, and more
• ✅ Created flexible analysis modes from quick summaries to detailed insights
• ✅ Added download functionality for analysis results
• ✅ Maintained consistent design with your existing application

Your application now has:

• Text chat with streaming responses
• Image generation with DALL-E 3 and GPT-Image-1
• Audio transcription with Whisper voice recognition
• File analysis with intelligent document processing
• Unified navigation between all features
• Professional UI with consistent TailwindCSS styling

Next up: You’ll learn about text-to-speech synthesis, where you can convert any text into natural-sounding speech using OpenAI’s voice models.

Your OpenAI mastery application is becoming incredibly comprehensive! 📁