⚡ Angular PWA ESLint

• Progressive Web App using ChatGPT to generate images

• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular PWA ESLint
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Progressive Web App to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

📷 Screenshots

📶 Technologies

• Angular v16
• Angular PWA v16 to add Angular service worked to app
• Open AI API

💾 Setup

• Install dependencies using npm i
• Get yourself a ChatGPT API key and Organisation ID from openai.com
• Run npm run lint:fix to lint app & fix errors
• Run npx prettier --write . to apply prettier rules to ALL files, except those listed in .prettierignore
• Run npx prettier --check . to check all files using prettier rules
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

💻 Code Examples

• 'ai-search.component.ts' method to search for AI image

ngOnInit(): void {
		const requestImage: ImageRequest = {
			prompt: "A live salmon with a funny face",
			n: 1,
			size: "256x256"
		};

		this.imageService
			.fetchImageFromPrompt(requestImage)
			.pipe(
				tap((res) => console.log("res: ", res, typeof res)),
				map((res: any) => res.body),
				map((image) => image.data),
				filter((images) => images.length != 0)
			)
			.subscribe((images) => {
				this.generatedImage = images[0].url;
			});
	}

🆒 Features

• Uses ChatGPT to search for images

📋 Status & To-Do List

• Status: Working
• To-Do: Add more ChatGPT search types, correct AI search result model 'Result' in 'image.ts' file

👏 Inspiration

• PWAs (Progressive Web Apps) in Angular - Make them look like Native Mobile Apps! - Roman Just Codes
• A Guide to Building a PWA in Angular 8
• Enea Jahollari: Configure Prettier and ESLint with Angular

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com