Skip to content

Latest commit

 

History

History
80 lines (68 loc) · 3.63 KB

File metadata and controls

80 lines (68 loc) · 3.63 KB

✨ Gemini Nexus (English Guide)

A multimodal AI client built with React + Vite + Tailwind on the frontend and Express + MySQL on the backend. It supports chat, image analysis, and file/folder batch analysis. The app includes latency/cost display, prompt templates, conversation export (download), pin-able sessions, resizable sidebar, and a status panel.

🌟 Highlights

  • 🧠 Multimodal UI: Chat, Vision, and File Analyzer with a unified model selector.
  • 📂 Session persistence & management: create/rename/delete, pin to top, draggable sidebar width; manual titles aren’t overwritten once history exists.
  • Message helpers: continue/retry/summarize/translate shortcuts for model replies; Enter to send, Shift+Enter for newline.
  • 📝 Prompt templates: built-in and custom templates, saved locally for quick insertion.
  • 📥 Export: one-click export of the current conversation to a Markdown file (download, not clipboard).
  • 🌐 Status visibility: DB/network health and latency, region/IP/ISP card (collapsible).
  • 💰 Cost & performance: response latency, token counts, and estimated cost displayed.

Project Structure (key files)

  • src/App.tsx – layout, sidebar, status panel.
  • src/components/ChatInterface.tsx – chat UI, model selector, templates, export, message actions.
  • src/components/VisionInterface.tsx – image upload/analysis.
  • src/components/FileAnalyzer.tsx – file/folder reading and batch analysis.
  • src/components/AboutModal.tsx – about dialog.
  • src/services/apiService.ts – frontend API client.
  • src/services/geminiService.ts – Gemini SDK calls (frontend).
  • server/index.js – Express backend, MySQL init, API routes.
  • server/schema.sql – DB schema reference (sessions, messages).

Install dependencies

npm install

Environment variables

Create .env in the project root (see .env.example):

API_KEY=your_gemini_api_key
APP_PORT=3001
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=gemini_nexus

Frontend uses VITE_API_KEY to call Gemini; backend can use API_KEY if needed. Ensure MySQL is running and the database exists; tables will auto-init on server start.

Run

Open two terminals:

# Terminal 1: backend
npm run server   # http://localhost:3001 by default

# Terminal 2: frontend
npm run dev      # http://localhost:5173 by default

Build & preview

npm run build
npm run preview

Usage

  • Model selection: supports Gemini family (e.g., 2.0 Flash Lite, 2.5 Flash/Pro, 3 Pro Preview, etc.), selector on the top-right of each page.
  • Input & send: Enter sends; Shift+Enter adds a newline. Input is disabled while generating.
  • File/Folder analysis: upload text/code files, they’re stitched and sent to Gemini; results scrollable on the right.
  • Image analysis: upload JPG/PNG/WebP (<=5MB); optional prompt; report area scrollable.
  • Conversation export: “Export” triggers download of a .md file (filename includes session id).
  • Pin & search: sidebar search filters titles; star to pin sessions to the top.
  • Status panel: collapsible, shows DB/network latency, region/IP/ISP info.

Backend API (brief)

  • GET /api/health
  • GET/POST/PATCH/DELETE /api/sessions
  • GET /api/sessions/:id/messages
  • POST /api/messages

Troubleshooting

  • DB connection issues: verify DB credentials in .env and MySQL is running.
  • API Key errors: ensure VITE_API_KEY is set and valid.
  • Port conflicts: change APP_PORT or frontend dev/proxy ports if needed.

License

Follows the existing project license (if unspecified, treated as current default).