Phantom Gallery

An AI-powered museum experience where artworks come alive through conversations with ghostly curators.

Explore famous masterpieces not just by looking, but by conversing with the ghostly curators who haunt the gallery halls. Witness clash of opinions in real-time debates, or summon the spirits trapped within the canvas.

---

How We Use DigitalOcean Gradient

Phantom Gallery utilizes a DigitalOcean Gradient Agent powered by the Llama 3.3 70B Instruct model. This agent is accessed via the OpenAI-compatible API. Both the orchestrator logic and the multi-turn debate flows use chat completions against that agent to dynamically route intents, construct personas, and maintain coherent multi-agent arguments.

---

Key Features

1. Ghost Strategy (Personas)

Choose your guide through art history:

• Lorenzo (Renaissance): A poetic scholar who sees divine beauty in every stroke.
• Claude (Impressionist): A dreamer obsessed with fleeting light and emotion.
• Edmund (Victorian Critic): A stern judge who values technical mastery and moral virtue.

2. Debate Mode (The Clash)

Real-Time AI Debate powered by Gradient Agents.

• Watch Lorenzo and Edmund argue over a masterpiece in real-time.
• Sequential Reasoning: 5-turn debate loop where agents respond to each other's points.
• Visual Drama: Dynamic "typing..." indicators and split-screen UI.

3. Living Subject Mode

Don't just talk about the art. Talk to it.

• Switch modes to summon the entity painted in the canvas.
• The AI adopts the persona of the subject (e.g., the weary peasant, the proud noble) based on visual context.

---

Requirements

Before you start, make sure you have the following installed on your computer:

1. Node.js (Version 18 or higher)
   • We use Node.js to run both our backend server and frontend website.
   • Download Node.js here.
2. Git
   • Required to download the project files.
   • Download Git here.
3. DigitalOcean Gradient Credentials
   • Required to power the AI agents. Without these, the ghosts cannot speak.

---

Step-by-Step Installation (A-Z Guide)

Step 1: Download the Project

1. Open your Command Prompt (Windows) or Terminal (Mac/Linux).
2. Copy and paste the following command and press Enter:

   git clone https://github.com/your-username/Phantom-Gallery.git

   (Note: Replace with the actual repository URL once updated)
3. Go into the project folder:

   cd Phantom-Gallery

Step 2: Configure the Credentials

The project needs access to DigitalOcean Gradient to run the agents.

1. In the project folder, create a new file named .env.local.
2. Open this file with any text editor (Notepad, VS Code, etc.).
3. Add the following lines, replacing the placeholder values with your actual Gradient access key and endpoint:

   GRADIENT_ACCESS_KEY=your_gradient_access_key_here
   GRADIENT_ENDPOINT=your_gradient_endpoint_here

4. Save and close the file.

Step 3: Install & Start the Backend (The Brain)

1. In your terminal, navigate to the backend folder:

   cd backend

2. Install the necessary dependencies:

   npm install

3. Start the server:

   node index.js

   You should see a message saying "Server running on port 8080". Keep this terminal window OPEN.

Step 4: Install & Start the Frontend (The Visuals)

1. Open a NEW terminal window (do not close the previous one).
2. Navigate to the frontend folder:

   cd frontend

   (Adjust the path if you are in a different folder)
3. Install the tools:

   npm install

4. Start the website:

   npm run dev

Step 5: Enter the Museum

1. Open your web browser (Chrome, Edge, Safari).
2. Type in the address: http://localhost:3000
3. Enjoy the experience!

---

Technical Support / Running the Project

• Backend Port: 8080
• Frontend Port: 3000
• Common Issues:
  • Error: "Address in use" -> Make sure no other program is using port 3000 or 8080.
  • Ghosts not replying -> Check your .env.local file and ensure your Gradient credentials are correct.

---

Credits

Created by Hammad Khan