Skip to content

SlizR/FHome_AI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

FHome_AI Photo


FHome AIยฎ โ€“ Education AI

A modern, open-source web assistant built to demonstrate how AI interfaces work under the hood โ€” ideal for students, teachers, schools, and anyone curious about building their own AI-powered chat system.

This project is part of the Slizยฎ ecosystem and was created to help beginners understand the mechanisms behind conversational AI, UI logic, and browser-based local data storage.


๐Ÿš€ Features

๐ŸŒฑ Beginner-friendly AI Interface

A clean, responsive chat UI that mimics modern AI assistants โ€” messages, avatars, typing animations, etc.

๐Ÿง  Works with Google Gemini API

Uses gemini-2.0-flash:generateContent to provide real-time responses.
Your prompts are wrapped with a custom instructional system for fine-tuned output behavior.

๐Ÿงฉ Local Chat History

Conversations are saved inside browser cookies โ€” no backend needed.

๐ŸŽจ Customization Tools

Inside the built-in settings modal, users can:

  • Change display name
  • Set a custom avatar
  • Adjust message border radius
  • See live avatar preview

๐Ÿ“ฑ Fully Responsive

Smooth mobile experience with slide-in sidebar and adaptive layout.

๐Ÿช„ Typing Animation

You get a modern typing indicator for AI messages โ€” extra โœจ vibes.


๐Ÿ“ธ Screenshots

(Insert your screenshots here, e.g. interface.png, settings.png)


๐Ÿ› ๏ธ Tech Stack

Layer Technology
Frontend HTML5, CSS3, JavaScript (Vanilla)
AI Backend Google Gemini API
Storage Cookies
Icons SVG / PNG
Compatibility Chrome, Firefox, Safari, Mobile browsers

โš™๏ธ How It Works

1. UI Rendering

The structure is split into:

  • Sidebar (chat list, new chat button, settings)
  • Main area (messages)
  • Modal window (settings)
  • Input area (message field + send button)

All elements are dynamically updated with renderChats() and renderMessages().

2. Chat Handling

Chats are stored as objects:

{
  id: 12345678,
  title: "New Chat",
  messages: [
    { role: "user", content: "Hello!" },
    { role: "ai", content: "Hi there!" }
  ],
  createdAt: "2024-01-01T00:00:00Z"
}

3. Saving to Cookies

Each update triggers:

setCookie('fhomeai_data', JSON.stringify({chats, settings}), 365);

This makes the project fully local and privacy-friendly.

4. AI Request Flow

When user sends a message:

  1. It's added to chat history
  2. Visual typing indicator appears
  3. All previous messages are assembled into the Gemini request format
  4. The user message is wrapped in a custom instruction block
  5. API returns the answer
  6. AI response is appended to chat

๐Ÿ“ก API Requirements

You need a Google AI Studio API key: https://aistudio.google.com

Update the key:

const API_KEY = "YOUR_API_KEY_HERE";

๐Ÿงช Running Locally

  1. Clone the repo:

    git clone https://github.com/SlizR/FHome_AI.git
  2. Enter the directory:

    cd FHome_AI
  3. Open index.html in a browser. Thatโ€™s it โ€” no backend, no dependencies. Itโ€™s 100% client-side.

If you want local hosting:

npx serve

๐Ÿงฌ File Structure

/
โ”œโ”€โ”€ index.html        # main app file
โ”œโ”€โ”€ icon.png          # project icon
โ”œโ”€โ”€ README.md         # documentation
โ””โ”€โ”€ LICENSE           # Apache 2.0 license

๐Ÿ› ๏ธ Customization

Change Colors

All main UI gradients live in CSS:

background: linear-gradient(135deg, #0a4d3c, #1a7a5e);

Modify Assistant Personality

Edit the getSystemInstruction() function:

function getSystemInstruction(userMessage) {
  return `
    ...instructions...
    Please answer the following message: ${userMessage}
  `.trim();
}

Replace AI Model

Change the endpoint:

const API_URL = "https://generativelanguage.googleapis.com/v1beta/models/another-model:generateContent";

๐Ÿงฉ Known Limitations

  • Cookies can store limited data (roughly 3โ€“4 MB)
  • No streaming support โ€” responses appear after full generation

๐Ÿ—บ๏ธ Roadmap

  • Switch cookies โ†’ IndexedDB
  • Add real-time streaming
  • Add dark/light theme toggle
  • Add custom model selection menu
  • Cloud sync for chats

๐Ÿ›๏ธ License โ€“ Apache License 2.0

This project is licensed under the Apache License 2.0.

Required attribution:

  • Original author: Slizยฎ
  • First public version: Mavox-ID (Creator Slizยฎ)

Full license is available in the LICENSE file.


๐Ÿ’ก Final Notes

FHome AIยฎ was built to teach โ€” not to replace industrial AI tools โ€” and shows how surprisingly small and understandable an AI chat interface can be.

If you use or modify it, just keep the attribution lines (as required by the Apache 2.0 license) and enjoy building cool things ๐Ÿš€ (Latest stable version: 939.stable)

What new in 939.stable

For the beta and two stable versions, you received news via site notifications and important information about major updates, as well as a new counter for how many requests remain to FHome AIยฎ (50 per 24 hours; and this is true for AI without registration: Go to AI, write, and leave a AI website).

Versions

  • Latest version of project: v939.stable
  • Latest stable version: v939.stable
  • Previous version: v938.stable
  • Latest alpha version: v902.alpha
  • Latest beta version: v937.beta
  • Latest LTS version: v901.latest
  • Latest test version: v920.testm
  • First version: n.a.start.gbl.game_doom

Warning!

The first version of the project was a game with AI, not just AI. The project was changed later, but this version (the first one) was private and cannot be accessed. (Game name: Cardoom, a light version of a similar game to Doom, can be launched using 15 bytes of information and a handler) The game is no longer available and has been removed.