AI Image Generator

This repository contains a frontend project built with HTML, CSS, and JavaScript, using a Gradio server as a temporary backend for testing and generating images from a text-to-image model.

The primary focus of this repo is the frontend design and interactivity, while the Gradio server is used only to provide a simple API-like interface for the JS client.

---

Preview

Interactive frontend UI connected to a Gradio-based backend for image generation.

---

Features

• Fully interactive frontend using modern HTML, CSS, and JavaScript.
• Customizable UI with responsive design.
• JS client connects to a Gradio server backend for:
  • Sending text prompts
  • Receiving generated images from a text-to-image model
• Lightweight and easy to extend.

---

Prerequisites

Gradio Server

1. Go Google Collab click on "File -> Upload Notebook" and upload GradioServer.ipynb script.
2. Make sure you set up HF_TOKEN = "YOUR_HUGGINGFACE_TOKEN"(for this you will need to go to https://huggingface.co/ and make your token which has write permissions).

JS Script

• After setting up and running Gradio Server you need to go to public/script.js in order to set SESSION_HASH_CONST and SESSION_DOMAIN variables.

• SESSION_HASH_CONST

  • After running GradioServer.ipynb you will be provided by a link to UI. Open it and right click anywhere on that site and go to Inspect element and go to Network tab.
  • Then from the provided Gradio UI generate any image.In the Network tab, find the join?lang=javascript request, click on it, and inspect the session_hash field in the Request Payload tab.
  • In the Network tab, find the join?lang=javascript request, click on it, and inspect the session_hash field in the Request Payload tab.In the Network tab, find the join?lang=javascript request, click on it, and inspect the session_hash field in the Request Payload tab.

• SESSION_DOMAIN:

  • When you run the GradioServer.ipynb from previous step, the last cell will give you a link in the following format: https://SESSION_DOMAIN.gradio.live
  • Copy and paste the string you get from that link to script.js.

---

Usage

After you have completed the previous step, just open the index.html page in your favourite browser.