# vibeCodingTutorial

**Repository Path**: xiaoRyan/vibe-coding-tutorial

## Basic Information

- **Project Name**: vibeCodingTutorial
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-03
- **Last Updated**: 2026-06-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vibe2PPT

Transform your opencode Vibe Coding conversation into a beautiful presentation.

Input an opencode `/share` link + project directory, automatically analyze the conversation narrative and code structure, and output a story-driven PPTX.

## Pipeline

```
opencode Share Link ──┐
                      ├──→ deepseek-v4-flash: analyze conversation + code → slide JSON
Project Directory ────┘
                           │
                     ┌─────┴─────┐
                     ▼           ▼
               flash-lite   u1-fast
              (optional:   (optional:
               parse pics)  generate visuals)
                     │           │
                     └─────┬─────┘
                           ▼
                    python-pptx → PPTX
```

### Three-Model Division of Labor

| Model | Role | Trigger Condition |
|------|------|---------|
| `deepseek-v4-flash` | Understand conversation + analyze code + generate slide content per page | **Always runs** |
| `sensenova-6.7-flash-lite` | Parse images in repo (architecture diagrams, screenshots) → text | "Parse repo images" checked + repo has images |
| `sensenova-u1-fast` | Generate infographics, timelines, architecture diagrams, code panels | "Generate infographic visuals" checked |

## Installation

```bash
# 1. Enter project directory
cd vibe2ppt

# 2. Install dependencies
pip install -r requirements.txt
```

## Configuration

Vibe2PPT reads SenseNova API configuration from `~/.config/opencode/opencode.json` by default:

```json
{
  "provider": {
    "sensenova": {
      "options": {
        "baseURL": "https://token.sensenova.cn/v1",
        "apiKey": "sk-xxx..."
      },
      "models": {
        "deepseek-v4-flash": { "name": "deepseek-v4-flash" },
        "sensenova-6.7-flash-lite": { "name": "sensenova-6.7-flash-lite" },
        "sensenova-u1-fast": { "name": "sensenova-u1-fast" }
      }
    }
  }
}
```

If `opencode.json` is at a non-standard path, set the environment variable:

```bash
$env:OPENCODE_CONFIG = "D:/path/to/opencode.json"
```

The `name` field in each model supports channel aliases — the app follows whatever name is configured.

## Usage

### Step 1: Get a Share Link in opencode

Run the `/share` command in your opencode session:

```
/share
```

This generates a link like `https://opencode.ai/s/4XP1fce5` and copies it to your clipboard.

> If sharing is not enabled, set `"share": "manual"` in `opencode.json` (default value).

### Step 2: Launch Vibe2PPT

```bash
python app.py
```

The browser will open `http://localhost:7860` automatically.

### Step 3: Fill in the Inputs

| Field | Description | Required |
|------|------|------|
| **opencode Share Link** | The `/share` link from step 1 | One of two |
| **Project Directory Path** | Local path to the code repository | Yes |
| **Or Paste Conversation Text** | Paste the full conversation (fallback if no share link) | One of two |
| **Parse repo images (flash-lite)** | Whether to parse images in the repo with flash-lite | Optional |
| **Generate infographic visuals (u1-fast)** | Whether to generate infographic visuals with u1-fast | Optional |
| **Style Theme** | Slide style: tech / creative / business | Pick one |

### Step 4: Generate

Click **Generate Presentation**, wait for the progress bar to complete, and download the PPTX.

## Output Slide Structure (12 pages)

| # | Title | Content |
|--|------|------|
| 1 | Cover | Project name + "Vibe Coding Journey" subtitle |
| 2 | What is Vibe Coding | Concept introduction |
| 3 | The Goal | User's original objective |
| 4 | Initial Design | First architecture approach |
| 5 | First Attempt | Key iteration milestones |
| 6 | The First Bug | Error description and discovery |
| 7 | Debug Deep Dive | Root cause + buggy code |
| 8 | Iteration & Fix | How it was fixed + improved code |
| 9 | Final Architecture | Module relationships and data flow |
| 10 | Module Breakdown | Individual module responsibilities |
| 11 | Data Flow | Step-by-step system data flow |
| 12 | Summary & Lessons | How to run + key takeaways |

## Project Structure

```
vibe2ppt/
├── app.py                   # Gradio UI entry
├── requirements.txt         # Python dependencies
├── README.md                # Documentation (Chinese)
├── README_EN.md             # Documentation (English)
├── VIBE_CODING_TUTORIAL.md  # Vibe Coding tutorial (Chinese)
├── VIBE_CODING_TUTORIAL_EN.md # Vibe Coding tutorial (English)
├── models/
│   ├── client.py            # OpenAI-compatible API wrapper
│   └── prompts.py           # Prompt templates for each stage
├── pipeline/
│   ├── fetcher.py           # Fetch share link + read project directory
│   ├── analyzer.py          # deepseek analysis → slide JSON
│   ├── vision.py            # flash-lite image understanding
│   └── generator.py         # u1-fast visual generation
└── ppt/
    ├── themes.py            # Three theme color schemes
    └── builder.py           # python-pptx assembly
```

## Dependencies

- `gradio` — Web UI
- `python-pptx` — PPTX generation
- `openai` — OpenAI-compatible API calls
- `requests` + `beautifulsoup4` + `lxml` — Fetch share link
- `Pillow` — Image processing
- `json5` — Fault-tolerant JSON parsing

## License

MIT