A modern web application built with SvelteKit and Tailwind CSS that allows users to generate stunning images using OpenAI's image generation models.
Website: https://gpt-images.ayfri.com
idb
library)npm install -g pnpm
)Clone the repository:
git clone https://github.com/Ayfri/gpt-images.git
cd gpt-images
Install dependencies:
pnpm install
Environment Variables (Optional):
If the application requires environment variables (e.g., for a backend API key if implemented differently), create a .env
file in the root directory based on .env.example
(if provided).
# Example .env file content
OPENAI_API_KEY="your_secret_key_here" # Usually handled client-side in this setup
Note: In the current setup, the API key seems to be managed client-side via the UI and stored in IndexedDB. Be mindful of security implications when handling API keys.
pnpm run dev
This command starts a local development server. Open your browser and navigate to http://localhost:5173
(or the port specified in the output).
Enter your OpenAI API key in the application's UI to start generating images.
pnpm run build
This command creates an optimized production build of your application in the build
directory (or as configured in svelte.config.js
).
pnpm run preview
This command starts a local server to preview the production build.
gpt-images/
├── .svelte-kit/ # SvelteKit build artifacts (generated)
├── node_modules/ # Project dependencies (managed by pnpm)
├── public/ # Static assets (favicon, images, etc.)
├── src/
│ ├── app.css # Global CSS styles
│ ├── app.html # HTML template shell
│ ├── assets/ # Static assets imported by modules
│ ├── lib/ # Application library (components, utils, etc.)
│ │ ├── components/ # Reusable Svelte components
│ │ ├── db/ # Database interaction (IndexedDB)
│ │ ├── services/ # API interactions (OpenAI)
│ │ ├── stores/ # Svelte stores
│ │ └── utils/ # Utility functions
│ ├── routes/ # Application pages and endpoints
│ │ ├── +layout.svelte # Root layout component
│ │ └── +page.svelte # Main page component
│ └── ... # Other SvelteKit files (hooks, service-worker)
├── .gitignore # Files/folders ignored by Git
├── package.json # Project metadata and dependencies
├── pnpm-lock.yaml # Exact dependency versions
├── pnpm-workspace.yaml # pnpm workspace configuration
├── postcss.config.js # PostCSS configuration
├── README.md # This file
├── svelte.config.js # SvelteKit configuration
├── tailwind.config.js# Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── tsconfig.node.json# TypeScript configuration for Node.js parts
└── vite.config.ts # Vite configuration
Contributions are welcome! Please follow standard fork-and-pull-request workflows.
This project is licensed under the MIT License - see the LICENSE file for details (if applicable).