Build Your First AI App

01

The Dining Room — HTML

Structure, layout, and everything the visitor sees

This prompt generates the HTML file, the skeleton of your application. Think of it as the dining room of a restaurant: the tables, chairs, menu board, and entrance.

# PROMPT: Generate Minimal HTML File

Create a simple HTML file for a "TITAN Cover Generator" app.

## Requirements

1. Standard HTML5 structure with DOCTYPE, html (lang="en"), head, and body

2. In the head section:
   - Meta charset UTF-8
   - Meta viewport for mobile
   - Title: "TITAN Cover Generator"
   - Link to external stylesheet "styles.css"

3. In the body, create a single div with class "container" containing:
   - An h1 with text "TITAN Cover Generator"
   - A label with text "Gemini API Key:"
   - A password input with id "apiKey" and placeholder "Paste your API key here"
   - A label with text "Your Photo:"
   - A file input with id "photoInput" and accept="image/*"
   - A button with id "generateBtn" and text "Generate My Cover"
   - An empty div with id "result"

4. At the end of body, add a script tag linking to "app.js"

## CRITICAL: Use these exact IDs - do not change them:
- apiKey
- photoInput
- generateBtn
- result

## Rules
- Keep it minimal, no extra classes or attributes
- No inline styles
- No comments needed
- Use simple indentation

Generate the complete HTML file now.

💡 Save the AI's output as index.html.

02

The Interior Design — CSS

Colors, fonts, spacing, and the visual atmosphere

This prompt generates the CSS file, the interior designer of your restaurant. It takes the bare skeleton and makes it beautiful.

# PROMPT: Generate Minimal CSS File

Create a simple CSS file with a purple theme for the TITAN Cover Generator app.

## Requirements

Style these elements:

1. **body**
   - Background color: #2d1b4e (dark purple)
   - Text color: white
   - Font family: Arial, sans-serif
   - Padding: 40px

2. **.container**
   - Max width: 500px
   - Center it with margin: 0 auto

3. **h1**
   - Center the text
   - Color: #e040fb (bright pink/purple)

4. **label**
   - Display: block
   - Margin top: 20px
   - Margin bottom: 5px

5. **input**
   - Width: 100%
   - Padding: 10px
   - No border
   - Border radius: 5px
   - Font size: 16px

6. **button**
   - Width: 100%
   - Margin top: 30px
   - Padding: 15px
   - Background color: #e040fb (bright pink/purple)
   - Text color: white
   - No border
   - Border radius: 5px
   - Font size: 18px
   - Cursor: pointer

7. **button:hover**
   - Background color: #ab47bc (slightly darker purple)

8. **#result**
   - Margin top: 30px
   - Center the text

9. **#result img**
   - Max width: 100%
   - Border radius: 10px

## CRITICAL: Use these exact selectors - do not change them:
- .container (class)
- #result (ID)

## Rules
- Keep it minimal
- No comments needed
- Use simple formatting

Generate the complete CSS file now.

💡 Save the AI's output as styles.css.

03

The Staff — JavaScript

The logic, interactions, and the connection to the AI chef

This prompt generates the JavaScript file, the staff of your restaurant. It handles everything that happens: taking the photo, calling the AI, and presenting the finished cover.

# PROMPT: Generate Minimal JavaScript File

Create a simple JavaScript file for the TITAN Cover Generator app that calls the Gemini API to generate a magazine cover from a photo.

## Requirements

### Step 1: Get HTML Elements
Use document.getElementById to get:
- apiKeyInput from "apiKey"
- photoInput from "photoInput"
- generateBtn from "generateBtn"
- result from "result"

### Step 2: Store Photo Data
- Create a variable: let photoBase64 = null
- Add a "change" event listener to photoInput
- When a file is selected:
  - Get the file from event.target.files[0]
  - Create a new FileReader
  - On reader.onload: extract base64 data by splitting e.target.result by comma and taking the second part [1], store it in photoBase64
  - Call reader.readAsDataURL(file)

### Step 3: Button Click Handler
Add a "click" event listener to generateBtn with an async function that does:

1. **Validation:**
   - If apiKeyInput.value is empty, alert "Please enter your API key" and return
   - If photoBase64 is null, alert "Please select a photo" and return

2. **Show loading:**
   - Set result.innerHTML to a paragraph saying "Generating your cover... please wait..."

3. **API URL:**
   - Create apiUrl using template literal: `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image:generateContent?key=${apiKeyInput.value}`

4. **The Prompt:**
   - Create a simple prompt string:
   ```
   Create a TITAN magazine cover featuring this person.
   Keep their face exactly as it is.
   Add "TITAN" as the magazine title in red at the top.
   Make it look like a professional magazine cover.
   ```

5. **Request Body:**
   Create requestBody object with this structure:
   ```javascript
   {
       contents: [{
           parts: [
               {
                   inline_data: {
                       mime_type: "image/jpeg",
                       data: photoBase64
                   }
               },
               {
                   text: prompt
               }
           ]
       }]
   }
   ```

6. **API Call (inside try block):**
   - Use fetch with POST method
   - Set header Content-Type to application/json
   - Body is JSON.stringify(requestBody)
   - Await the response and parse as JSON

7. **Display Result:**
   - Get parts from data.candidates[0].content.parts
   - Loop through parts with for...of
   - If a part has inlineData:
     - Create imageUrl as data URL: `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`
     - Set result.innerHTML to an img tag with this src
     - Return
   - If no image found, set result.innerHTML to "No image generated. Try again."

8. **Error Handling (catch block):**
   - Set result.innerHTML to show the error message

## CRITICAL: Use these exact element IDs - do not change them:
- "apiKey"
- "photoInput"
- "generateBtn"
- "result"

## Rules
- Add simple comments explaining each step
- Use async/await for the API call
- Keep it minimal and readable

Generate the complete JavaScript file now.

💡 Save the AI's output as app.js. This is the brain of your app. Same folder as the other two files.

Welcome to the Workshop

How This Works

Three Prompts, Three Files, One App

Gemini API Key

Ready-Made Files

Deploy Your App