├── src ├── App.css ├── index.css ├── App.jsx ├── main.jsx └── components │ └── ImageGenerator │ ├── ImageGenerator.jsx │ └── ImageGenerator.css ├── README.md ├── vite.config.js ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── package.json └── public └── vite.svg /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AI-Image-Generator 2 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #0f1b21; 3 | color: white; 4 | } -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ImageGenerator from './components/ImageGenerator/ImageGenerator' 3 | 4 | const App = () => { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ai-Image-Generator 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ai-image-generator", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.3.3", 18 | "@types/react-dom": "^18.3.0", 19 | "@vitejs/plugin-react": "^4.3.1", 20 | "eslint": "^8.57.0", 21 | "eslint-plugin-react": "^7.34.3", 22 | "eslint-plugin-react-hooks": "^4.6.2", 23 | "eslint-plugin-react-refresh": "^0.4.7", 24 | "vite": "^5.3.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/ImageGenerator/ImageGenerator.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './ImageGenerator.css' 3 | import default_image from '../assets/default_image.svg' 4 | const ImageGenerator = () => { 5 | return ( 6 |
7 |
Ai image Genertor
8 |
9 |
10 |
11 |
12 | 15 |
Generate
16 |
17 |
18 | ) 19 | } 20 | 21 | export default ImageGenerator 22 | -------------------------------------------------------------------------------- /src/components/ImageGenerator/ImageGenerator.css: -------------------------------------------------------------------------------- 1 | .ai-image-generation{ 2 | display: flex; 3 | flex-direction: column; 4 | margin: auto; 5 | align-items: center; 6 | margin-top: 80px; 7 | margin: 20px; 8 | gap: 30px; 9 | } 10 | 11 | .header{ 12 | font-size: 70px; 13 | font-weight: 500; 14 | padding-bottom: 30px; 15 | } 16 | 17 | .header span{ 18 | color: #DE1B89; 19 | font-weight: 600; 20 | } 21 | 22 | .img-loading{ 23 | display: flex; 24 | flex-direction: column; 25 | } 26 | 27 | .img-loading img{ 28 | max-width: 512px; 29 | } 30 | 31 | .search-box{ 32 | display: flex; 33 | width: 1000px; 34 | height: 95px; 35 | justify-content: space-around; 36 | align-items: center; 37 | border-radius: 50px; 38 | background: #1f3540; 39 | } 40 | 41 | .search-input{ 42 | width: 600px; 43 | height: 50px; 44 | background: transparent; 45 | border: none; 46 | outline: none; 47 | font-size: 18px; 48 | color: white; 49 | padding-left: 35px; 50 | margin-right: 35px; 51 | } 52 | 53 | .generate-btn{ 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | width: 300px; 58 | height: 85px; 59 | font-size: 20px; 60 | border-radius: 50px; 61 | background: #DE1B89; 62 | cursor: pointer; 63 | } -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------