Static Website AI Generator (SWAG)

Generate front-end static websites and various web UI components through user prompts or image inputs using Gemini AI.

App Usage Instructions

Before using this web app, please follow the steps below.

Obtaining an API Key:

1. Create an account and log in at Google AI Dev Site
2. Select the free tier option
3. Create a project using Google Cloud Studio
4. Generate an API key within your project

5. Copy your Gemini API key.

Using SWAG:

1. Open the SWAG Web App in your browser
2. Paste your API key into the designated field

3. Note that prompts entered using the free tier may be utilized by Gemini AI to improve their model quality.

Web App URLs

• swag-preview.vercel.app
• swag-preview.pages.dev

Screenshots

Features

• Generate static websites from text prompts.
• Generate static websites from both text prompts and image file inputs.
• Dark mode support.
• Localization support (currently available in English and Indonesian).
• Configure AI temperature (randomness) response.
• Select Gemini AI Models.
• Prompt history sidebar (available when the "Save all user data to browser" checkbox is selected).
• Edit the last user input prompt.
• Realtime website preview (accessible from a new tab).
• Realtime generated code preview (HTML, CSS, and JS).
• Copy specific code snippets.
• Export/download generated static website files to your local disk (as a single HTML file or as HTML, CSS, and JS in a compressed ZIP file).
• Reset all user data (including prompt histories and saved Gemini API Key in the browser).

Tech Stack

• React.js with Vite build tool
• Tailwind CSS
• Headless UI
• Animate.css
• i18next
• jsZIP
• Google AI API
• React Dropzone
• React Drag & Drop
• React Syntax Highlighter
• React Router
• SweetAlert2
• Vite Plugin PWA

Known Issues

• Candidate was blocked due to RECITATION error results may occur randomly.
  Source: Candidate was blocked due to RECITATION bug