Spaces:

dataera2013
/

podcraft_web_app

Sleeping

File size: 9,994 Bytes

#!/bin/bash

# This script is used to build and prepare the frontend code during the Docker build process
# It is called from the Dockerfile

set -e  # Exit on error

echo "Starting frontend build process..."

# Clear the static directory but create it if it doesn't exist
mkdir -p ./static
rm -rf ./static/*

if [ -d "frontend/podcraft" ]; then
    echo "Frontend code found, attempting to build..."
    
    # Navigate to the frontend directory
    cd frontend/podcraft
    
    # Check if package.json exists
    if [ -f "package.json" ]; then
        echo "Installing frontend dependencies..."
        npm install --quiet || { echo "npm install failed"; exit 1; }
        
        echo "Building frontend application..."
        npm run build || { echo "npm build failed"; exit 1; }
        
        # Check if the build directory exists
        if [ -d "dist" ]; then
            echo "Build successful, copying files to static directory..."
            cp -r dist/* ../../static/
            echo "Frontend build files copied to static directory"
            
            # List the contents of the static directory to verify
            echo "Static directory contents:"
            ls -la ../../static/
        else
            echo "ERROR: Build directory 'dist' not found after build"
            exit 1
        fi
    else
        echo "ERROR: package.json not found in frontend/podcraft"
        exit 1
    fi
    
    # Return to the original directory
    cd ../..
else
    echo "Frontend code not found, creating a fallback UI"
    mkdir -p frontend/podcraft/public
    mkdir -p frontend/podcraft/src
    
    # Create a minimal package.json
    cat > frontend/podcraft/package.json << EOF
{
  "name": "podcraft",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.10.1",
    "react-router-dom": "^6.15.0",
    "reactflow": "^11.8.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.0.0",
    "eslint-plugin-react-hooks": "^4.0.0",
    "eslint-plugin-react-refresh": "^0.4.0",
    "vite": "^4.0.0"
  }
}
EOF

    # Create a minimal index.html
    cat > frontend/podcraft/index.html << EOF
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PodCraft - AI Podcast Generator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
EOF

    # Create a minimal vite.config.js
    cat > frontend/podcraft/vite.config.js << EOF
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:8000',
      '/login': 'http://localhost:8000',
      '/signup': 'http://localhost:8000',
      '/token': 'http://localhost:8000',
      '/generate-podcast': 'http://localhost:8000'
    }
  }
})
EOF

    # Create a minimal main.jsx
    mkdir -p frontend/podcraft/src
    cat > frontend/podcraft/src/main.jsx << EOF
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
EOF

    # Create a minimal App.jsx with a more functional UI
    cat > frontend/podcraft/src/App.jsx << EOF
import React, { useState, useEffect } from 'react'
import './App.css'

function App() {
  const [apiStatus, setApiStatus] = useState('checking')
  const [mongoStatus, setMongoStatus] = useState('unknown')
  const [apiMessage, setApiMessage] = useState('')
  
  useEffect(() => {
    // Check the API status
    fetch('/api/status')
      .then(response => response.json())
      .then(data => {
        setApiStatus('online')
        setApiMessage(data.message || 'API is running')
      })
      .catch(error => {
        setApiStatus('offline')
        console.error('API Error:', error)
      })
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <div className="logo">
          <i className="fas fa-microphone-alt"></i>
          <h1>PodCraft</h1>
        </div>
        <p className="tagline">AI-Powered Podcast Generator</p>
        
        <div className="status-container">
          <div className="status-card">
            <div className="status-header">
              <i className="fas fa-server"></i>
              <h3>API Status</h3>
            </div>
            <div className="status-content">
              <div className={`status-indicator \${apiStatus}`}>
                {apiStatus === 'checking' ? 'Checking...' : 
                 apiStatus === 'online' ? 'Online' : 'Offline'}
              </div>
              {apiMessage && <p className="status-message">{apiMessage}</p>}
            </div>
          </div>
        </div>
        
        <div className="features">
          <div className="feature">
            <i className="fas fa-robot"></i>
            <h3>AI Debate</h3>
            <p>Create engaging debates between AI personalities</p>
          </div>
          <div className="feature">
            <i className="fas fa-podcast"></i>
            <h3>Podcast Generation</h3>
            <p>Convert debates into audio podcasts</p>
          </div>
          <div className="feature">
            <i className="fas fa-cogs"></i>
            <h3>Workflow Editor</h3>
            <p>Customize the podcast creation process</p>
          </div>
        </div>
        
        <div className="note">
          <p>Note: This is a simplified UI for the application.</p>
          <p>The full application UI is unavailable in this build.</p>
          <p>API endpoints can still be accessed directly for testing.</p>
        </div>
      </header>
    </div>
  )
}

export default App
EOF

    # Create enhanced CSS files
    cat > frontend/podcraft/src/index.css << EOF
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #1a1a2e;
  color: #ffffff;
}

* {
  box-sizing: border-box;
}
EOF

    cat > frontend/podcraft/src/App.css << EOF
.App {
  text-align: center;
}

.App-header {
  background-color: #0f0f1a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem;
}

.logo {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.logo i {
  font-size: 3rem;
  color: #6366F1;
  margin-right: 1rem;
}

.logo h1 {
  font-size: 3rem;
  margin: 0;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tagline {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  color: #94a3b8;
}

.status-container {
  width: 100%;
  max-width: 800px;
  margin-bottom: 3rem;
}

.status-card {
  background-color: #1e1e2d;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.status-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.status-header i {
  font-size: 1.5rem;
  color: #6366F1;
  margin-right: 0.5rem;
}

.status-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.status-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-indicator {
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.status-indicator.checking {
  background-color: #374151;
  color: #d1d5db;
}

.status-indicator.online {
  background-color: #065f46;
  color: #a7f3d0;
}

.status-indicator.offline {
  background-color: #991b1b;
  color: #fecaca;
}

.status-message {
  font-style: italic;
  color: #94a3b8;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  width: 100%;
  max-width: 1000px;
}

.feature {
  background-color: #1e1e2d;
  border-radius: 0.5rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 300px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature:hover {
  transform: translateY(-5px);
}

.feature i {
  font-size: 2.5rem;
  color: #8B5CF6;
  margin-bottom: 1rem;
}

.feature h3 {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.feature p {
  margin: 0;
  color: #94a3b8;
  font-size: 0.9rem;
}

.note {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #1e1e2d;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 800px;
}

.note p {
  margin: 0.5rem 0;
  color: #94a3b8;
  font-size: 0.9rem;
}
EOF

    echo "Created fallback frontend code"
    
    # Try to build and copy the fallback UI
    cd frontend/podcraft
    npm install --quiet || { echo "npm install failed for fallback UI"; exit 1; }
    npm run build || { echo "npm build failed for fallback UI"; exit 1; }
    
    if [ -d "dist" ]; then
        echo "Fallback UI build successful, copying files to static directory..."
        cp -r dist/* ../../static/
        echo "Fallback UI build files copied to static directory"
    else
        echo "ERROR: Fallback UI build directory 'dist' not found"
        # Copy our static HTML directly as last resort
        echo "Copying static HTML file as last resort..."
        cp index.html ../../static/
    fi
    
    # Return to the original directory
    cd ../..
fi

echo "Frontend build process completed"

# Make the script executable
chmod +x $0