Enhance Media Support, UI Improvements, and Pipeline Robustness with Gemini Integration and Video Processing Features

.github/workflows/release.yml

@@ -37,12 +37,80 @@ jobs:
         run: |
           git push origin main --follow-tags
 
+      - name: Generate AI Release Notes
+        id: generate-notes
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY_FOR_PR_DESC_GENERATOR }}
+          MODEL_NAME: "gpt-5.4-nano-2026-03-17"
+        run: |
+          # Get the new tag from the previous step
+          NEW_TAG=${{ steps.version-bump.outputs.version }}
+
+          # Find the previous tag (excluding the one we just created)
+          PREV_TAG=$(git describe --tags --abbrev=0 $NEW_TAG^ 2>/dev/null || echo "")
+
+          echo "Current Tag: $NEW_TAG"
+          echo "Previous Tag: $PREV_TAG"
+
+          if [ -z "$PREV_TAG" ]; then
+            # If no previous tag, take all commits
+            COMMITS=$(git log --oneline --no-merges)
+          else
+            # Get commits between the two tags, excluding the version bump commit itself
+            COMMITS=$(git log $PREV_TAG..$NEW_TAG^ --oneline --no-merges)
+          fi
+
+          if [ -z "$COMMITS" ]; then
+            COMMITS="No changes detected."
+          fi
+
+          echo "=== Commits to summarize ==="
+          echo "$COMMITS"
+          echo "============================"
+
+          # Prepare JSON payload for OpenAI API
+          JSON_PAYLOAD=$(jq -n --arg commits "$COMMITS" --arg model "$MODEL_NAME" '{
+            model: $model,
+            messages: [
+              {
+                role: "system",
+                content: "You are a professional release manager. Summarize commit messages into clear, user-friendly release notes with markdown sections for Features, Bug Fixes, and Improvements."
+              },
+              {
+                role: "user",
+                content: ("Summarize these commits into professional release notes. Use bullet points and be concise.\n\nCommits:\n" + $commits)
+              }
+            ],
+            temperature: 0.7
+          }')
+
+          # Call OpenAI API
+          RESPONSE=$(curl -s -X POST "https://api.openai.com/v1/chat/completions" \
+            -H "Content-Type: application/json" \
+            -H "Authorization: Bearer ${OPENAI_API_KEY}" \
+            -d "$JSON_PAYLOAD")
+
+          # Extract notes from response
+          NOTES=$(echo "$RESPONSE" | jq -r '.choices[0].message.content' 2>/dev/null || echo "")
+
+          # Fallback if AI fails or returns null
+          if [ "$NOTES" == "null" ] || [ -z "$NOTES" ]; then
+            echo "Warning: AI generation failed or returned empty. Falling back to commit list."
+            echo "API Response: $RESPONSE"
+            NOTES="### Changes\n\n$COMMITS"
+          fi
+
+          # Output the notes for the next step
+          echo "changelog<<EOF" >> $GITHUB_OUTPUT
+          echo "$NOTES" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+
       - name: Create Release
         uses: softprops/action-gh-release@v2
         with:
           tag_name: ${{ steps.version-bump.outputs.version }}
           name: Release ${{ steps.version-bump.outputs.version }}
-          generate_release_notes: true
+          body: ${{ steps.generate-notes.outputs.changelog }}
           draft: false
           prerelease: false
         env:

README.md

@@ -1,85 +1,91 @@
+  # 🌊 FrameFlow
 
-# 🎬 VGTU Video Summarization
-![Project Process](./docs/imgs/process.jpeg)
-
+<img src="./docs/screenshots/01_light-theme.jpg" width="100%" alt="FrameFlow Banner" />
 
 ---
 
-A high-fidelity platform that transforms long-form video content into concise, meaningful highlights. By leveraging **Google Gemini's** multimodal intelligence and precise **FFmpeg** engineering, it provides a seamless chat-based refinement experience.
+  **FrameFlow** is a high-fidelity multimedia platform that bridges the gap between raw video/image assets and creative intelligence. By fusing **Google Gemini's** multimodal brain with precise **FFmpeg** engineering, FrameFlow transforms how you consume, extract, and generate media.
+
+<div>
+
+  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+  [![Platform: Electron](https://img.shields.io/badge/Platform-Electron-lightgrey.svg)](https://www.electronjs.org/)
+  [![Framework: Vue 3](https://img.shields.io/badge/Framework-Vue%203-4fc08d.svg)](https://vuejs.org/)
+  [![AI: Google Gemini](https://img.shields.io/badge/AI-Google%20Gemini-4285F4.svg)](https://deepmind.google/technologies/gemini/)
 
-**Key Use Cases:**
-- 🎓 **Academic Hub**: Condense 2-hour technical lectures into 5-minute study guides.
-- 📱 **Content Creation**: Generate social media teasers from raw footage with natural language.
-- 🔍 **Quick Review**: Rapidly navigate long meetings or webinars for specific insights.
+</div>
 
 ---
-## 🧭 Quick Links & Navigation
 
-| Topic | Resource / Section | Description |
-| :--- | :--- | :--- |
-| 🏗 **Architecture** | [**Technical Deep-Dive**](./docs/architecture.md) | Pipeline logic, intent nodes, and iterative generation. |
-| 🎨 **UI & UX** | [**Design Overview**](./docs/ui_ux.md) | Frontend components, state, and user interaction flow. |
-| 🚀 **Setup** | [**Setup Guide**](./docs/setup.md) | Prerequisites and environment installation instructions. |
-| 📦 **Repository** | [**Deliverables**](#-deliverables) | Formal project components and file structure. |
-| 🧠 **AI Logic** | [**The Pipeline**](#-the-ai-pipeline-highlights) | Logic overview of the 4-phase summarization engine. |
-| 🛠 **Verifiability** | [**Reproducibility**](#-reproducibility) | Ensuring consistent results across environments. |
-| 📸 **Demo** | [**Final Screenshot**](#-final-snapshot) | Visual overview of the chat and video editor interface. |
+## 🚀 The Three Pillars of FrameFlow
 
----
+FrameFlow is built on three core intelligence layers, designed for creators, researchers, and developers.
 
-## 📦 Deliverables
-This formal homework project delivers a complete production-grade ecosystem:
-*   **Production Code**: Electron desktop app written in Vue 3 & TypeScript.
-*   **AI Engine**: A 4-phase pipeline (Extraction, Intent, Generation, Assembly).
-*   **Reproduction Tools**: Download the [Sample Videos Folder](https://drive.google.com/drive/folders/1g2Cp533NPQPtngLvnCuP5T8PZNc-FTZK?usp=sharing) (includes full and short versions) and use the app for a 4-phase trace.
-*   **Visual Documentation**: Fully documented [Architecture](./docs/architecture.md) and [UI/UX Flow](./docs/ui_ux.md).
+### 1. 🎞️ Video to Short Video
+Transform long-form content into concise, meaningful highlights.
+- **Academic Precision**: Condense 2-hour technical lectures into 5-minute study guides.
+- **Meeting Recap**: Rapidly navigate long webinars for specific insights.
+- **Narrative Awareness**: AI understands scene transitions and audio context simultaneously.
+
+### 2. 📸 Video to Thumbnail
+Extract and generate high-fidelity visual assets from any video source.
+- **Auto-Enrichment**: AI analyzes scene quality to extract the most representative frames.
+- **Professional Thumbnails**: Generate YouTube-ready or presentation-grade thumbnails with AI-driven composition.
+- **Batch Processing**: Extract hundreds of scene-indexed images in seconds.
+
+### 3. 🎨 Images to Image
+Leverage multimodal prompts to transform existing images or generate new ones from scratch.
+- **Visual Continuity**: Use existing frames as structural references for new generations.
+- **Prompt-Driven Flow**: Refine images using natural language within a unified chat-graph interface.
+- **Multimodal Fusion**: Combine video context with external image uploads for hybrid creativity.
 
 ---
 
-## 🧠 The AI Pipeline (Highlights)
+## 🧩 Supported Inputs
 
-Our unique **4-Phase Engine** ensures that every summary is contextually accurate:
-*   **Intent Recognition**: Uses a "Brain" node to distinguish between chat and generation, preventing token waste.
-*   **Iterative Refinement**: Supports an **Edit Mode** that performs a technical "diff" on previous timelines for perfect consistency.
-*   **Multimodal Fusion**: Processes visual scene transitions, audio transcripts, and user context simultaneously.
+FrameFlow handles a wide range of media formats and sources:
 
-> [!TIP]
-> **Deep Dive:** Check out the **[Architecture Deep-Dive](./docs/architecture.md)** for Mermaid diagrams and logic breakdowns.
+- **Video Formats**: Native support for `.mp4`, `.avi`, `.mov`, and `.webm`.
+- **Online Sources**: YouTube, Google Drive, and direct media URLs (via `yt-dlp`).
+- **Images**: High-fidelity `.jpg`, `.png`, and `.webp` for structural reference and multimodal generation.
+- **Optimization**: High-res videos are automatically downscaled (480p) to ensure lightning-fast AI analysis without losing metadata.
 
 ---
 
-## 🎨 UX Highlights
-The interface is designed for **transparency** and **iterative control**:
-*   **Version History**: Switch between generated versions instantly to find the best cut.
-*   **Live Token Metrics**: Monitor AI usage costs and token counts in real-time.
-*   **Zero-Config Preprocessing**: Automatic scene detection and transcript extraction upon upload.
+## 🎨 Premium Experience (UX)
 
----
+FrameFlow isn't just a tool; it's an iterative workspace:
 
-## 🛠 Reproducibility
-To guarantee identical behavior across different environments:
-*   **Sample Data**: Download our [Main Reference Videos Folder](https://drive.google.com/drive/folders/1g2Cp533NPQPtngLvnCuP5T8PZNc-FTZK?usp=sharing) (includes full and short versions) to test the pipeline.
-*   **JSON Enforcement**: Strict schemas ensure deterministic AI responses.
-*   **Precision Slicing**: FFmpeg settings calibrated for frame-accurate cuts.
-*   **Dependency Guard**: Locked environments via `package-lock.json` and `.npmrc`.
-*   **Reference Stability**: Edit mode always builds upon a fixed "Seed" timeline to avoid hallucinations.
+- **Vue Flow Graph Interface**: Manage parallel tasks and version branches visually.
+- **Live Metrics**: Monitor AI token usage and processing costs in real-time.
+- **Zero-Config Preprocessing**: Automatic scene detection and transcript extraction.
+- **Ambient Design**: A sleek, dark-mode-first interface with glassmorphism and smooth animations.
 
 ---
 
-## 🚀 Getting Started
-Check the **[Installation & Setup Guide](./docs/setup.md)** to configure:
-1.  **Environment**: Node.js and Gemini API Key.
-2.  **Tools**: FFmpeg and PySceneDetect for your OS.
-3.  **Launch**: `npm install && npm run dev`.
+## 🧭 Navigation & Setup
+
+| Section | Link | Purpose |
+| :--- | :--- | :--- |
+| 🏗 **Architecture** | [**Deep-Dive**](./docs/architecture.md) | Pipeline logic, intent nodes, and iterative generation. |
+| 🚀 **Installation** | [**Setup Guide**](./docs/setup.md) | Node.js, Gemini API, FFmpeg, and yt-dlp setup. |
+| 🎨 **UI/UX** | [**Design Overview**](./docs/ui_ux.md) | Frontend components and interaction flow. |
 
 ---
 
-## 📸 Final Snapshot
+## 📸 Interface Preview
+
 <div align="center">
-  <img src="./docs/imgs/screenshot_chatpage.png" width="800px" alt="App Screenshot" />
+  <img src="./docs/screenshots/01_dark-theme.jpg" alt="FrameFlow Dashboard" />
 </div>
 
 ---
 
-## 📜 License
-Licensed under the MIT License - see [LICENSE](LICENSE) for details.
+## 📜 License & Credits
+
+FrameFlow is licensed under the **MIT License**. Created by [navidshad](https://github.com/navidshad) and his classmates as part of a high-fidelity AI engineering initiative at Vilnius Gediminas Technical University (VGTU).
+
+---
+
+> [!TIP]
+> **Pro Choice:** Check the **[Architecture Deep-Dive](./docs/architecture.md)** to see how we handle multimodal intent recognition and technical "diffs" for consistency.

docs/setup.md

@@ -1,6 +1,6 @@
 # 🛠 Installation & Setup Guide
 
-This guide provides detailed instructions on how to set up the environment and run the **VGTU Video Summarization** application.
+This guide provides detailed instructions on how to set up the environment and run the **FrameFlow** application.
 
 ---
 
@@ -51,8 +51,8 @@ The application relies on **FFmpeg** for video processing and **PySceneDetect**
 
 1. **Clone the repository**:
    ```bash
-   git clone https://github.com/navidshad/vgtu-video-summarization.git
-   cd vgtu-video-summarization
+   git clone https://github.com/navidshad/frameflow.git
+   cd frameflow
    ```
 
 2. **Install dependencies**: