Apppublic

svjack/conversation-viewer-classic

sourceHugging Faceupdated 7mo agoView on Hugging Face

0likes

App README

Conversation Viewer

A standalone web application for viewing exported conversation history JSON files and displaying related multimedia content.

Features

—📁 Conversation List: Display all exported conversation history files
—🔍 Conversation Details: Complete display of conversation content, including message flow and attachments
—🖼️ Multimedia Display: Direct playback and viewing of images, videos, and audio
—📊 Statistics: Show message count, user/AI message ratio, etc.
—🔄 Real-time Updates: Automatically detect new files and refresh the list
—📱 Responsive Design: Adapted for desktop and mobile devices

Directory Structure

conversation-viewer/
├── app.py                    # FastAPI main application
├── requirements.txt          # Python dependencies
├── start_english.bat        # Windows startup script (English)
├── README.md                # Documentation
├── test_port.py             # Port testing utility
├── uv.lock                  # uv dependency lock file
├── .venv/                   # Python virtual environment
├── data/                    # Data directory
│   └── files/              # Multimedia files (to be linked)
├── hist/                    # Conversation history JSON files
├── static/                  # Static files (CSS/JS) - currently empty
└── templates/               # HTML templates
    ├── index.html          # Home page template
    └── conversation.html   # Conversation details template

Quick Start

Method 1: Using uv (Recommended)

uv is a fast Python package manager and resolver that provides better dependency management.

1. Install uv (if not already installed)

bash

# Windows
pip install uv

# Or use other installation methods, refer to: https://github.com/astral-sh/uv

2. Start the service

bash

# Windows - double click start_english.bat
# Or run from command line:
start_english.bat

# The script will automatically:
# 1. Check if uv is installed
# 2. Create virtual environment (.venv) if not exists
# 3. Install dependencies
# 4. Start the service

Method 2: Using traditional method

1. Install dependencies

bash

pip install -r requirements.txt

2. Start the service

bash

# Directly run the application
python app.py --port 9051

3. Prepare Data

There are two ways to prepare data:

Method A: Create symbolic link (Recommended)

bash

# Execute in conversation-viewer directory
mklink /J data\files ..\..\data\files

Method B: Copy files

bash

# Copy multimedia files
copy ..\..\data\files\* data\files\

# Copy conversation history files to hist directory
copy *.json hist\

4. Access the Application

Open browser and visit: http://localhost:9051

Note: Default port is 9051 (greater than 9050). To change the port: ``bash python app.py --port 9060 # Use port 9060 ``

Usage Instructions

Export Conversation History

1.In the application, click the "⬇️ Download" button below AI reply messages
2.The system will automatically download JSON files to the browser's default download directory
3.Copy the downloaded JSON files to the conversation-viewer/hist/ directory

View Conversations

1.Visit http://localhost:9051 to view the conversation list
2.Click the "View Details" button to enter the conversation details page
3.On the details page you can:
4.View complete message flow
5.Play videos and audio
6.View images
7.Download attachment files

File Access

—Multimedia files accessed via /files/{file_id}
—Conversation history accessed via /conversation/{filename}
—API endpoints: /api/conversations and /api/conversation/{filename}

Configuration

Changing Port

You can change the port via command line arguments:

bash

# Start with specified port
python app.py --port 9060

# Or modify port parameters in the startup script

You can also modify the default port in the code (edit app.py):

python

parser.add_argument("--port", type=int, default=9051, help="Service port number (default: 9051)")

Changing File Paths

Edit app.py and modify the following configuration:

python

BASE_DIR = Path(__file__).parent
FILES_DIR = BASE_DIR / "data" / "files"  # Multimedia files directory
HIST_DIR = BASE_DIR / "hist"             # Conversation history directory

API Endpoints

Get Conversation List

GET /api/conversations

Response example:

json

{
  "success": true,
  "data": [
    {
      "filename": "conversation_20240115_103000.json",
      "metadata": {...},
      "stats": {...},
      "preview": "User's first message...",
      "export_time": "2024-01-15T10:30:00",
      "size_kb": 45.2
    }
  ],
  "count": 1
}

Get Conversation Details

GET /api/conversation/{filename}

Get Multimedia Files

GET /files/{file_id}

Notes

1.File Security: The application checks file paths to prevent directory traversal attacks
2.File Types: Supports common image, video, and audio formats
3.Encoding Issues: Ensure JSON files use UTF-8 encoding
4.Performance Considerations: Large conversation files (>10MB) may affect loading speed

Troubleshooting

Issue 1: Images/Videos not displaying

—Check if files exist in data/files/ directory
—Check file permissions
—Check if file URLs are correct

Issue 2: Conversation list is empty

—Check if there are JSON files in hist/ directory
—Check if JSON file format is correct
—Check console error messages

Issue 3: Service fails to start

—Check Python version (requires Python 3.7+)
—Check if dependencies are installed
—Check if port 9051 is occupied, try another port:

bash

  python app.py --port 9060

Issue 4: start_english.bat not working

—Ensure file encoding is ASCII/ANSI (not UTF-8 with BOM)
—Check if uv is installed: where uv
—Run from command line to see error messages

Development

Adding New Features

1.Add new route handler functions in app.py
2.Add or modify HTML templates in templates/
3.Add CSS/JS files in static/

Customizing Styles

Modify CSS styles in templates/, or add custom CSS files to static/css/

Extending Multimedia Support

Add new file type support in the media_types dictionary in app.py.

License

MIT License