/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Main App Component function AppCraftAI() { const [appConcept, setAppConcept] = useState(''); const [generatedApp, setGeneratedApp] = useState(null); const [isLoading, setIsLoading] = useState(false); const [errorMessage, setErrorMessage] = useState(''); const [currentStep, setCurrentStep] = useState(0); const steps = [ 'App Concept', 'AI Generation', 'Code Preview', 'Testing Simulation' ]; const fallbackAppConcepts = [ 'A productivity app for remote workers', 'A social networking platform for book lovers', 'A fitness tracking and motivation app', 'A local restaurant discovery and review platform', 'An educational game for children learning mathematics' ]; const generateAppConcept = async () => { setIsLoading(true); setErrorMessage(''); try { let conceptCompletion, codeCompletion; try { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); // Generate app concept conceptCompletion = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "system", content: "You are an innovative app concept generator. Create a unique, practical app idea based on the user's input. Provide a brief description, target audience, and key features." }, { role: "user", content: `Generate an innovative app concept based on: ${appConcept || fallbackAppConcepts[Math.floor(Math.random() * fallbackAppConcepts.length)]}` } ], max_tokens: 300 }); // Generate basic code structure codeCompletion = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "system", content: "Generate a basic React TypeScript web app structure with key components based on the app concept. Include component structure, basic state management, and a simple UI layout." }, { role: "user", content: `Create a basic React TypeScript web app for this concept: ${conceptCompletion.choices[0].message.content}` } ], max_tokens: 500 }); } catch (openaiError) { console.error('OpenAI generation error:', openaiError); // Fallback generation conceptCompletion = { choices: [{ message: { content: fallbackAppConcepts[Math.floor(Math.random() * fallbackAppConcepts.length)], } }] }; codeCompletion = { choices: [{ message: { content: ` // Fallback React TypeScript App Structure import React, { useState } from 'react'; function App() { const [feature, setFeature] = useState(''); return (

Sample App

Basic app structure with placeholder functionality

); } export default App; ` } }] }; setErrorMessage('AI generation encountered an issue. Using a fallback concept.'); } setGeneratedApp({ concept: conceptCompletion.choices[0].message.content, code: codeCompletion.choices[0].message.content }); setCurrentStep(2); } catch (error) { console.error('Unexpected app generation error:', error); setErrorMessage('An unexpected error occurred. Please try again.'); } finally { setIsLoading(false); } }; const simulateAppTesting = () => { const testResults = [ { type: 'Functionality', passed: Math.random() > 0.2 }, { type: 'Performance', passed: Math.random() > 0.1 }, { type: 'User Experience', passed: Math.random() > 0.3 }, { type: 'Security', passed: Math.random() > 0.4 }, { type: 'Compatibility', passed: Math.random() > 0.5 } ]; return (

🧪 App Testing Simulation

{testResults.map((test, index) => (

{test.type}: {test.passed ? '✅ Passed' : '❌ Failed'}

))}

Total Tests: {testResults.length} | Passed: {testResults.filter(t => t.passed).length} | Failed: {testResults.filter(t => !t.passed).length}

); }; return (

🚀 AppCraft AI

{steps.map((step, index) => ( {step} ))}

{errorMessage && (

⚠️ {errorMessage}

)} {currentStep === 0 && (

setAppConcept(e.target.value)}
            style={styles.textarea}
          />
          <button 
            onClick={generateAppConcept} 
            style={styles.button}
            disabled={isLoading}
          >
            {isLoading ? 'Generating... 🔄' : 'Craft My App 🛠️'}
          </button>
          {!appConcept && (
            <div style={styles.hintBox}>
              <p>💡 Hint: Leave blank for a random app concept</p>
            </div>
          )}
        </div>
      )}

{currentStep === 2 && generatedApp && (
        <div style={styles.resultSection}>
          <div style={styles.conceptBox}>
            <h2>App Concept 💡</h2>
            <p>{generatedApp.concept}</p>
          </div>
          <div style={styles.codePreview}>
            <h2>Code Preview 💻</h2>
            <pre>{generatedApp.code}</pre>
          </div>
          <div style={styles.actionButtons}>
            <button 
              style={styles.button} 
              onClick={() => setCurrentStep(3)}
            >
              Run App Tests 🧪
            </button>
          </div>
        </div>
      )}

{currentStep === 3 && (
        <div>
          {simulateAppTesting()}
          <div style={styles.actionButtons}>
            <button 
              style={styles.button} 
              onClick={() => setCurrentStep(0)}
            >
              Start Over 🔄
            </button>
          </div>
        </div>
      )}

<div style={styles.footer}>
        <a 
          href={import.meta.url.replace("esm.town", "val.town")} 
          target="_top" 
          style={styles.sourceLink}
        >
          View Source 🔍
        </a>
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<AppCraftAI />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>AppCraft AI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { 'Content-Type': 'text/html' }
  });
}

const styles = {
  ...{
    errorBox: {
      backgroundColor: '#ffdddd',
      color: '#d9534f',
      padding: '10px',
      borderRadius: '5px',
      marginBottom: '15px',
      border: '1px solid #d9534f'
    },
    hintBox: {
      backgroundColor: '#e6f2ff',
      color: '#3498db',
      padding: '10px',
      borderRadius: '5px',
      marginTop: '10px',
      fontSize: '0.9em'
    },
    testSummary: {
      marginTop: '15px',
      padding: '10px',
      backgroundColor: '#f4f4f4',
      borderRadius: '5px',
      textAlign: 'center'
    },
    footer: {
      marginTop: '20px',
      paddingTop: '10px',
      borderTop: '1px solid #ddd',
      textAlign: 'center'
    },
    sourceLink: {
      color: '#3498db',
      textDecoration: 'none',
      fontWeight: 'bold'
    }
  },
  container: {
    fontFamily: 'Arial, sans-serif',
    maxWidth: '800px',
    margin: '0 auto',
    padding: '20px',
    textAlign: 'center',
    backgroundColor: '#f4f6f9',
    borderRadius: '15px',
    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
  },
  // ... (rest of the existing styles remain the same)
};

AICodeGeneratorApp

Version 2