first implé
This commit is contained in:
achraf
121
README.md
121
README.md
@@ -1,36 +1,115 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# Will & Representation — Schopenhauer Chat App
|
||||
|
||||
## Getting Started
|
||||
*“Speak, and the Will shall betray itself.”*
|
||||
|
||||
First, run the development server:
|
||||
**Will & Representation** is a minimal, elegant, mobile-first chat application that allows users to converse with an AI persona inspired by the 19th-century German philosopher **Arthur Schopenhauer**. Unlike generic conversational bots, this application acts as a dry, elegant, and philosophically consistent interlocutor grounded deeply in Schopenhauer’s core doctrine: the world as representation, the blind striving of the Will, existence swinging between suffering and boredom, art as temporary intellectual liberation, and compassion as the true foundation of ethics.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design & Visuals
|
||||
|
||||
The interface is designed with a **dark-academic aesthetic** featuring:
|
||||
- **Palette**: Clean, modern dark mode surfaces (`#0E0E10` background, `#17171A` surfaces) with high-contrast warm cream text (`#F4F1EA`) and premium gold accents (`#C8A96A`).
|
||||
- **Typography**: Sleek Sans-serif body font (`Inter`) combined with elegant Serif headers (`Cormorant Garamond`).
|
||||
- **Mobile First**: Fixed bottom chat inputs, safe-area boundary configurations, smooth scrolling animations, and auto-resizing text fields tailored for phone screen viewports.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
- **Core Framework**: [Next.js 15+ / 16 (App Router)](https://nextjs.org/)
|
||||
- **Logic**: React 19, TypeScript
|
||||
- **Styling**: Tailwind CSS v4 with custom design tokens
|
||||
- **AI SDK**: Official `@google/genai` (Google Gen AI SDK)
|
||||
- **Markdown Support**: `react-markdown` for rendering assistant formatting (quotes, lists, code snippets)
|
||||
- **State Store**: Client-side `localStorage` caching for secure local conversation history
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ Environment Variables
|
||||
|
||||
Copy the example template to prepare your local configuration:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
cp .env.example .env.local
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
Open `.env.local` and add your credentials:
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
```env
|
||||
# Google Gemini API key from AI Studio
|
||||
GEMINI_API_KEY=your_gemini_api_key_here
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
# Default model (can override)
|
||||
GEMINI_MODEL=gemini-3.1-flash
|
||||
```
|
||||
|
||||
## Learn More
|
||||
*Note: The backend endpoint includes a model fallback sequence. If `gemini-3.1-flash` is not available, it automatically falls back to `gemini-2.5-flash` and then `gemini-1.5-flash` to prevent API failures.*
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
---
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
## 🚀 Local Setup & Development
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
1. **Install Dependencies**:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Deploy on Vercel
|
||||
2. **Run Dev Server**:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
3. **Open the browser**:
|
||||
Navigate to [http://localhost:3000](http://localhost:3000) using a desktop or mobile browser viewport.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
---
|
||||
|
||||
## 🧠 Key Features & Usage
|
||||
|
||||
### 1. Persona Intensity Modes
|
||||
You can customize the philosopher's tone via the **Settings Modal** (accessible from the header top-right):
|
||||
- **Gentle Schopenhauer**: Softens the delivery, offering patient, empathetic, and slightly less biting responses to personal struggles while maintaining philosophical seriousness.
|
||||
- **Classical Schopenhauer (Default)**: Lucid, formal, pessimistic, and dryly witty. Strictly aligns with his historical treatises.
|
||||
- **Severe Schopenhauer**: Concise, sharp, and cutting. Highly skeptical of human ambition and societal optimism.
|
||||
|
||||
### 2. Source-Grounded Mode
|
||||
Toggle **Source-Grounded Mode** in the settings. This appends directives to anchor replies strictly to historical publications, reminding the simulation to draw directly from his main works.
|
||||
|
||||
### 3. Quote Card Generator
|
||||
Click the **Quote** (quotation mark) icon beneath any response from the assistant. This opens the **Quote Card Generator**. You can edit the text to shorten it, preview it on a beautiful dark-academic gold-bordered canvas, and download it as an **800x500 PNG image** for sharing.
|
||||
|
||||
### 4. Safety Guardrails
|
||||
Discussing existential pessimism necessitates care. The application monitors incoming messages for crisis signals. If expressions of self-harm or suicidal intent are detected, the system immediately bypasses the philosophical persona to deliver direct, compassionate mental health resources and helpline information.
|
||||
|
||||
---
|
||||
|
||||
## 🐳 Docker Deployment
|
||||
|
||||
The application is completely containerized for simple plug-and-play execution.
|
||||
|
||||
1. **Verify your Env File**:
|
||||
Ensure `.env.local` exists and contains your `GEMINI_API_KEY`.
|
||||
|
||||
2. **Start the Container**:
|
||||
```bash
|
||||
docker compose up --build -d
|
||||
```
|
||||
|
||||
3. **Browse the App**:
|
||||
Navigate to [http://localhost:3000](http://localhost:3000) on your device.
|
||||
|
||||
4. **Stop the Container**:
|
||||
```bash
|
||||
docker compose down
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 Bibliography & References
|
||||
|
||||
For further reading on Arthur Schopenhauer's original public-domain writings, refer to:
|
||||
- **Project Gutenberg Author Index**: [Arthur Schopenhauer Page](https://www.gutenberg.org/ebooks/author/3648)
|
||||
- **The World as Will and Idea, Vol. 1**: [Gutenberg eBook 38427](https://www.gutenberg.org/ebooks/38427)
|
||||
- **Studies in Pessimism**: [Gutenberg eBook 10732](https://www.gutenberg.org/ebooks/10732)
|
||||
- **Internet Archive PDF Index**: [The World as Will and Representation](https://archive.org/details/the-world-as-will-and-representation)
|
||||
|
||||
Reference in New Issue
Block a user