I want to build an image generating web app. give me step by step instructions to do it. i am new at coding.

Project Overview:
1. User Interface - Website where users input prompts and specify number of images
2. Backend - Cloudflare Workers AI for image generation
3. Hosting - Netlify for frontend deployment

Tech Stack Recommendation:

Frontend:
- React.js (recommended for beginners with good AI support)
- TypeScript (adds type safety, better for maintaining larger projects)
- Tailwind CSS (utility-first CSS framework, easy to style)
- Vite (modern build tool, faster than Create React App)

Project Structure:
```
image-generator/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── ImageGrid/
│   │   ├── GenerationForm/
│   │   └── LoadingStates/
│   ├── hooks/              # Custom React hooks
│   ├── services/           # API and external services
│   │   ├── cloudflare/     # Cloudflare Workers AI integration
│   │   └── storage/        # Image storage service
│   ├── utils/              # Helper functions
│   ├── types/              # TypeScript type definitions
│   ├── constants/          # Configuration and constants
│   └── pages/              # Main page components
├── public/                 # Static assets
└── functions/             # Netlify serverless functions
```

Key Features to Implement:
1. Image Generation:
   - Form for prompt input
   - Number of images selector

   - Generation settings
API perameters
"prompt": string, =
"steps": 4 , = 0 to 8 Slider + Input (as Inference Steps)
"guidance": 7.5, 0 to 20 Slider + Input (as Guidance Scale)
"height": 1024, 256 to 2048 Input (as Height)
"width": 1024, 256 to 2048 Input (as Width)
"seed":  , Generate 5 digit uniqe seed for all the images. (it shoudl not be visible for users)

2. Image Display:
   - Responsive grid layout
   - Loading states
   - Error states
   - Image download options
   - Lightbox for enlarged view

3. Storage Management:
   - Automatic cleanup of old images
   - Image metadata storage
   - Optimization for bandwidth

4. User Experience:
   - Progressive loading
   - Responsive design
   - Generation progress indication
   - Error feedback

Development Process:
1. Setup Phase:
   - Initialize React + TypeScript project with Vite
   - Setup Tailwind CSS
   - Configure ESLint and Prettier
   - Setup GitHub repository

2. Infrastructure Phase:
   - Configure Cloudflare Workers AI access
   - Setup Netlify deployment
   - Configure environment variables

3. Development Phase:
   - Build basic UI components
   - Implement image generation service
   - Build image display grid
   - Add error handling
   - Implement loading states

4. Testing Phase:
   - Test image generation limits
   - Test storage limits
   - Test responsive design
   - Performance testing
   - Error scenario testing

Important Considerations:

2. Security:
   - Secure API keys
   - Validate user inputs
   - Implement image content filtering if needed

Development Tools:
1. VS Code Extensions:
   - ESLint
   - Prettier
   - Tailwind CSS IntelliSense
   - GitHub Copilot (if available)
   - Thunder Client (for API testing)

2. Browser Extensions:
   - React Developer Tools
   - Redux DevTools (if using state management)

Next Steps:
1. Set up development environment
2. Create GitHub repository
3. Initialize project with recommended stack
4. Set up CI/CD with Netlify
5. Create basic project structure
6. Set up API keys and environment variables

API Docs

const fetch = require('node-fetch');

let url = 'https://api.cloudflare.com/client/v4/accounts/account_id/ai/run/@cf/black-forest-labs/flux-1-schnell';

let options = {
  method: 'POST',
  headers: {'Content-Type': 'application/json', Authorization: 'Bearer undefined'},
  body: '{"prompt":"string","steps":4}'
};

fetch(url, options)
  .then(res => res.json())
  .then(json => console.log(json))
  .catch(err => console.error('error:' + err));

Responses
200
400
Object with user data.

Body

application/json

application/json
result
object
image
string
The generated image in Base64 format.

success
boolean
Default:
true

Bad request

Body

applications/json

applications/json
errors
array[object]
required
code
string
required
message
string
required
result
object
required
success
boolean
required