Spaces:

francozanardi
/

pycaps

Paused

App Files Files Community

Franco Zanardi commited on Jun 26, 2025

Commit

9c093a9

1 Parent(s): d366aea

upload streamlit ui

Browse files

Files changed (8) hide show

.gitignore +1 -0
Dockerfile +22 -3
README.md +2 -5
editor/__init__.py +14 -0
editor/index.html +734 -0
requirements.txt +2 -3
src/.streamlit/config.toml +9 -0
src/streamlit_app.py +243 -38

.gitignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ .vscode

Dockerfile CHANGED Viewed

@@ -1,5 +1,6 @@
-FROM python:3.9-slim
 WORKDIR /app
 RUN apt-get update && apt-get install -y \
@@ -7,15 +8,33 @@ RUN apt-get update && apt-get install -y \
     curl \
     software-properties-common \
     git \
     && rm -rf /var/lib/apt/lists/*
 COPY requirements.txt ./
 COPY src/ ./src/
-RUN pip3 install -r requirements.txt
 EXPOSE 8501
 HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
-ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]

+FROM python:3.10-slim
+ENV HOME="/app"
 WORKDIR /app
 RUN apt-get update && apt-get install -y \
     curl \
     software-properties-common \
     git \
+    ffmpeg \
+    libnss3 libnspr4 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libdbus-1-3 \
+    libxkbcommon0 libatspi2.0-0 libx11-6 libxcomposite1 libxdamage1 libxext6 \
+    libxfixes3 libxrandr2 libgbm1 libasound2 \
     && rm -rf /var/lib/apt/lists/*
+WORKDIR /app
 COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+ENV PLAYWRIGHT_BROWSERS_PATH="/app/.playwright"
+ENV XDG_CACHE_HOME="/app/.cache"
+RUN playwright install-deps
+RUN playwright install chromium
+RUN python3 -c "import whisper; whisper.load_model('base', download_root='${XDG_CACHE_HOME}/whisper')"
+RUN useradd -m -u 1000 user
 COPY src/ ./src/
+RUN chown -R user:user /app
+USER user
 EXPOSE 8501
 HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
+ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md CHANGED Viewed

@@ -12,9 +12,6 @@ short_description: Add styled subtitles to short videos
 license: mit
 ---
-# Welcome to Streamlit!
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).

 license: mit
 ---
+# Pycaps Demo
+This a demo of a open-source tool to add styled subtitles in videos. You can see more about this tool in the [pycaps GitHub repo](https://github.com/francozanardi/pycaps).

editor/__init__.py ADDED Viewed

	@@ -0,0 +1,14 @@

+import streamlit.components.v1 as components
+import os
+_component_func = components.declare_component(
+    "editor",
+    path=os.path.join(os.path.dirname(os.path.abspath(__file__)))
+)
+def subtitle_editor(initial_document, key=None):
+    component_value = _component_func(
+        initial_document=initial_document,
+        key=key,
+    )
+    return component_value

editor/index.html ADDED Viewed

	@@ -0,0 +1,734 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Subtitle Editor</title>
+    <style>
+        body {
+            background-color: #282c34;
+            color: #abb2bf;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 0;
+            overflow: hidden;
+        }
+        #editor-container {
+            padding: 20px;
+            height: calc(100vh - 80px);
+            overflow-y: auto;
+        }
+        .segment {
+            background-color: #21252b;
+            border: 1px solid #3c4049;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            padding: 15px;
+            position: relative;
+        }
+        .segment-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #3c4049;
+        }
+        .segment-title {
+            font-size: 14px;
+            color: #61afef;
+            font-weight: bold;
+        }
+        .segment-controls {
+            display: flex;
+            gap: 8px;
+        }
+        .control-btn {
+            background-color: #4b5263;
+            border: none;
+            border-radius: 4px;
+            padding: 4px 8px;
+            font-size: 12px;
+            color: #abb2bf;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .control-btn:hover {
+            background-color: #5c6370;
+        }
+        .split-btn {
+            background-color: #e5c07b;
+            color: #282c34;
+        }
+        .split-btn:hover {
+            background-color: #f0d07b;
+        }
+        .merge-btn {
+            background-color: #98c379;
+            color: #282c34;
+        }
+        .merge-btn:hover {
+            background-color: #a8d389;
+        }
+        .line {
+            display: flex;
+            align-items: center;
+            background-color: #2c313a;
+            border: 1px solid #4b515d;
+            border-radius: 6px;
+            margin-bottom: 8px;
+            padding: 8px 12px;
+            position: relative;
+            flex-wrap: wrap;
+        }
+        .line-controls {
+            display: flex;
+            gap: 6px;
+            margin-left: auto;
+            margin-right: 8px;
+        }
+        .line-control-btn {
+            background-color: #4b5263;
+            border: none;
+            border-radius: 3px;
+            padding: 2px 6px;
+            font-size: 10px;
+            color: #abb2bf;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.2s, background-color 0.2s;
+        }
+        .line:hover .line-control-btn {
+            opacity: 1;
+        }
+        .line-control-btn:hover {
+            background-color: #5c6370;
+        }
+        .word {
+            display: inline-flex;
+            align-items: center;
+            background-color: #3b4048;
+            border: 1px dashed #6b7280;
+            border-radius: 4px;
+            padding: 4px 8px;
+            margin: 3px;
+            cursor: pointer;
+            transition: all 0.2s;
+            user-select: none;
+            position: relative;
+        }
+        .word:hover {
+            background-color: #4b5263;
+            border-style: solid;
+            transform: translateY(-1px);
+        }
+        .word.selected {
+            background-color: #61afef;
+            color: #282c34;
+            border-color: #61afef;
+        }
+        /* Dropdown para palabras */
+        .word-dropdown {
+            position: fixed;
+            background-color: #2c313a;
+            border: 1px solid #4b515d;
+            border-radius: 6px;
+            padding: 8px 0;
+            z-index: 1000;
+            min-width: 150px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            display: none;
+        }
+        .word-dropdown.show {
+            display: block;
+        }
+        .dropdown-item {
+            padding: 8px 12px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .dropdown-item:hover {
+            background-color: #3e4451;
+        }
+        .dropdown-separator {
+            height: 1px;
+            background-color: #4b515d;
+            margin: 4px 0;
+        }
+        /* Tooltip para tags */
+        .word-tags {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #21252b;
+            color: #c792ea;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 11px;
+            white-space: nowrap;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s, visibility 0.2s;
+            z-index: 10;
+            margin-bottom: 4px;
+        }
+        .word:hover .word-tags {
+            opacity: 1;
+            visibility: visible;
+        }
+        /* Modal para editar tags */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0,0,0,0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.2s, visibility 0.2s;
+        }
+        .modal-overlay.show {
+            opacity: 1;
+            visibility: visible;
+        }
+        .modal {
+            background-color: #21252b;
+            border-radius: 8px;
+            padding: 20px;
+            min-width: 300px;
+            max-width: 500px;
+        }
+        .modal h3 {
+            margin-top: 0;
+            color: #61afef;
+        }
+        .modal input, .modal textarea {
+            box-sizing: border-box;
+            width: 100%;
+            background-color: #2c313a;
+            border: 1px solid #4b515d;
+            border-radius: 4px;
+            padding: 8px;
+            color: #abb2bf;
+            font-family: inherit;
+            margin-bottom: 10px;
+        }
+        .modal-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .footer-controls {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: #21252b;
+            padding: 15px;
+            text-align: right;
+            border-top: 1px solid #3c4049;
+        }
+        button {
+            color: #abb2bf;
+            background-color: #4b5263;
+            border: none;
+            border-radius: 5px;
+            padding: 10px 20px;
+            font-size: 14px;
+            font-weight: bold;
+            cursor: pointer;
+            margin-left: 10px;
+            transition: background-color 0.2s;
+        }
+        button:hover {
+            background-color: #5c6370;
+        }
+        #save-btn {
+            background-color: #61afef;
+            color: #21252b;
+        }
+        #save-btn:hover {
+            background-color: #7abfff;
+        }
+        .split-indicator {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background-color: #e5c07b;
+            opacity: 0;
+            transition: opacity 0.2s;
+            pointer-events: none;
+        }
+        .split-indicator.show {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div id="editor-container">Loading...</div>
+    <div class="footer-controls">
+        <button id="cancel-btn">Cancel</button>
+        <button id="save-btn">Save and Close</button>
+    </div>
+    <div id="tag-modal" class="modal-overlay">
+        <div class="modal">
+            <h3>Edit tags</h3>
+            <label>Word: <span id="modal-word-text"></span></label>
+            <textarea id="modal-tags" placeholder="Enter tags separated by commas (e.g., noun, important, technical)"></textarea>
+            <div class="modal-buttons">
+                <button id="modal-cancel">Cancel</button>
+                <button id="modal-save">Save</button>
+            </div>
+        </div>
+    </div>
+    <div id="component-value" style="display: none;"></div>
+    <script>
+        // Source: https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+        function sendMessageToStreamlitClient(type, data) {
+            const outData = Object.assign({
+                isStreamlitMessage: true,
+                type: type,
+            }, data);
+            window.parent.postMessage(outData, "*");
+        }
+        function init() {
+            sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+        }
+        function setFrameHeight(height) {
+            sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+        }
+        // `data` puede ser cualquier valor serializable en JSON.
+        function sendDataToPython(data) {
+            sendMessageToStreamlitClient("streamlit:setComponentValue", {value: data, dataType: "json"});
+        }
+        function onDataFromPython(event) {
+            if (event.data.type !== "streamlit:render") return;
+            const initialDocument = event.data.args.initial_document;
+            if (initialDocument) {
+                main(initialDocument);
+            } else {
+                document.getElementById('editor-container').textContent = 'Error: Could not load subtitle data.';
+            }
+        }
+        function main(documentData) {
+            const editorContainer = document.getElementById('editor-container');
+            const tagModal = document.getElementById('tag-modal');
+            let documentState = JSON.parse(JSON.stringify(documentData));
+            let currentWordDropdown = null;
+            let currentEditingWord = null;
+            function render() {
+                editorContainer.innerHTML = '';
+                documentState.segments.forEach((segment, segIndex) => {
+                    const segDiv = document.createElement('div');
+                    segDiv.className = 'segment';
+                    const segHeader = document.createElement('div');
+                    segHeader.className = 'segment-header';
+                    const segTitle = document.createElement('div');
+                    segTitle.className = 'segment-title';
+                    segTitle.textContent = `Segment ${segIndex + 1} (${segment.time.start.toFixed(2)}s - ${segment.time.end.toFixed(2)}s)`;
+                    const segControls = document.createElement('div');
+                    segControls.className = 'segment-controls';
+                    if (segIndex < documentState.segments.length - 1) {
+                        const mergeBtn = document.createElement('button');
+                        mergeBtn.className = 'control-btn merge-btn';
+                        mergeBtn.textContent = 'Merge Next';
+                        mergeBtn.addEventListener('click', () => mergeSegments(segIndex));
+                        segControls.appendChild(mergeBtn);
+                    }
+                    segHeader.appendChild(segTitle);
+                    segHeader.appendChild(segControls);
+                    segDiv.appendChild(segHeader);
+                    segment.lines.forEach((line, lineIndex) => {
+                        const lineDiv = document.createElement('div');
+                        lineDiv.className = 'line';
+                        line.words.forEach((word, wordIndex) => {
+                            const wordSpan = document.createElement('span');
+                            wordSpan.className = 'word';
+                            wordSpan.dataset.segIndex = segIndex;
+                            wordSpan.dataset.lineIndex = lineIndex;
+                            wordSpan.dataset.wordIndex = wordIndex;
+                            wordSpan.textContent = word.text;
+                            if (word.semantic_tags && word.semantic_tags.length > 0) {
+                                const tagsTooltip = document.createElement('span');
+                                tagsTooltip.className = 'word-tags';
+                                tagsTooltip.textContent = word.semantic_tags.map(t => t.name).join(', ');
+                                wordSpan.appendChild(tagsTooltip);
+                            }
+                            wordSpan.addEventListener('click', (e) => {
+                                e.stopPropagation();
+                                showWordDropdown(wordSpan, segIndex, lineIndex, wordIndex);
+                            });
+                            lineDiv.appendChild(wordSpan);
+                        });
+                        const lineControls = document.createElement('div');
+                        lineControls.className = 'line-controls';
+                        if (lineIndex < segment.lines.length - 1) {
+                            const mergeBtn = document.createElement('button');
+                            mergeBtn.className = 'line-control-btn merge-btn';
+                            mergeBtn.textContent = 'Merge with next line';
+                            mergeBtn.addEventListener('click', () => mergeLines(segIndex, lineIndex));
+                            lineControls.appendChild(mergeBtn);
+                            const splitBtn = document.createElement('button');
+                            splitBtn.className = 'line-control-btn split-btn';
+                            splitBtn.textContent = 'Split into two segments';
+                            splitBtn.addEventListener('click', () => splitSegments(segIndex, lineIndex));
+                            lineControls.appendChild(splitBtn);
+                        }
+                        lineDiv.appendChild(lineControls);
+                        segDiv.appendChild(lineDiv);
+                    });
+                    editorContainer.appendChild(segDiv);
+                });
+            }
+            function showWordDropdown(wordElement, segIndex, lineIndex, wordIndex) {
+                // Cerrar dropdown anterior si existe
+                if (currentWordDropdown) {
+                    currentWordDropdown.remove();
+                }
+                const dropdown = document.createElement('div');
+                dropdown.className = 'word-dropdown show';
+                const rect = wordElement.getBoundingClientRect();
+                dropdown.style.top = `${rect.bottom}px`;
+                dropdown.style.left = `${rect.left}px`;
+                const word = documentState.segments[segIndex].lines[lineIndex].words[wordIndex];
+                dropdown.innerHTML = `
+                    <div class="dropdown-item" data-action="edit-text">✏️ Edit Text</div>
+                    <div class="dropdown-item" data-action="edit-tags">🏷️ Edit Tags</div>
+                    <div class="dropdown-separator"></div>
+                    <div class="dropdown-item" data-action="split-after">↓ Split Line After</div>
+                    <div class="dropdown-separator"></div>
+                    <div class="dropdown-item" data-action="delete" style="color: #e06c75;">🗑️ Delete Word</div>
+                `;
+                dropdown.addEventListener('click', (e) => {
+                    const action = e.target.dataset.action;
+                    if (!action) return;
+                    switch (action) {
+                        case 'edit-text':
+                            editWordText(segIndex, lineIndex, wordIndex);
+                            break;
+                        case 'edit-tags':
+                            editWordTags(segIndex, lineIndex, wordIndex);
+                            break;
+                        case 'split-after':
+                            splitLine(segIndex, lineIndex, wordIndex);
+                            break;
+                        case 'delete':
+                            deleteWord(segIndex, lineIndex, wordIndex);
+                            break;
+                    }
+                    dropdown.remove();
+                    currentWordDropdown = null;
+                });
+                document.body.appendChild(dropdown);
+                currentWordDropdown = dropdown;
+            }
+            function editWordText(segIndex, lineIndex, wordIndex) {
+                const word = documentState.segments[segIndex].lines[lineIndex].words[wordIndex];
+                const newText = prompt('Edit word (use [SPACE] key to split words):', word.text);
+                if (!newText || !newText.trim()) {
+                    return;
+                }
+                const words = newText.trim().split(/\s+/);
+                if (words.length === 1) {
+                    const newWord = {
+                        text: newText,
+                        time: { start: word.time.start, end: word.time.end },
+                        semantic_tags: [],
+                        structure_tags: [],
+                        clips: [],
+                        max_layout: { position: {x:0, y:0}, size: {width:0, height:0} }
+                    };
+                    documentState.segments[segIndex].lines[lineIndex].words.splice(wordIndex, 1, newWord);
+                    render();
+                    return;
+                }
+                const originalStart = word.time.start.toFixed(2);
+                const originalEnd = word.time.end.toFixed(2);
+                const totalDuration = word.time.end - word.time.start;
+                const totalChars = words.reduce((sum, w) => sum + w.length, 0);
+                let currentTime = word.time.start;
+                const timestamps = words.map((text, index) => {
+                    const duration = totalDuration * (text.length / totalChars);
+                    const start = currentTime.toFixed(2);
+                    const end = (currentTime + duration).toFixed(2);
+                    currentTime = parseFloat(end);
+                    return { text, start, end };
+                });
+                const exampleMessage = timestamps.map(t =>
+                    `"${t.text}" (${t.start}s - ${t.end}s)`
+                ).join(' and ');
+                const warningMessage = `Warning: You are splitting one word into multiple words!\n\n` +
+                    `Original word: "${word.text}" (${originalStart}s - ${originalEnd}s)\n` +
+                    `Will be split into: ${exampleMessage}\n\n` +
+                    `The original timestamp will be proportionally distributed based on word length.\n\n` +
+                    `Do you want to proceed with this split?`;
+                if (confirm(warningMessage)) {
+                    const replacementWords = timestamps.map(t => ({
+                        text: t.text,
+                        time: {
+                            start: parseFloat(t.start),
+                            end: parseFloat(t.end)
+                        },
+                        semantic_tags: [],
+                        structure_tags: [],
+                        clips: [],
+                        max_layout: { position: {x:0, y:0}, size: {width:0, height:0} }
+                    }));
+                    documentState.segments[segIndex].lines[lineIndex].words.splice(wordIndex, 1, ...replacementWords);
+                    render();
+                }
+            }
+            function editWordTags(segIndex, lineIndex, wordIndex) {
+                const word = documentState.segments[segIndex].lines[lineIndex].words[wordIndex];
+                currentEditingWord = { segIndex, lineIndex, wordIndex };
+                document.getElementById('modal-word-text').textContent = word.text;
+                document.getElementById('modal-tags').value = word.semantic_tags.map(t => t.name).join(', ');
+                tagModal.classList.add('show');
+            }
+            function deleteWord(segIndex, lineIndex, wordIndex) {
+                if (confirm('Delete this word?')) {
+                    documentState.segments[segIndex].lines[lineIndex].words.splice(wordIndex, 1);
+                    if (documentState.segments[segIndex].lines[lineIndex].words.length === 0) {
+                        documentState.segments[segIndex].lines.splice(lineIndex, 1);
+                    }
+                    if (documentState.segments[segIndex].lines.length === 0) {
+                        documentState.segments.splice(segIndex, 1);
+                    }
+                    render();
+                }
+            }
+            function splitLine(segIndex, lineIndex, wordIndex) {
+                const line = documentState.segments[segIndex].lines[lineIndex];
+                const splitAt = wordIndex + 1;
+                if (splitAt > 0 && splitAt < line.words.length) {
+                    const wordsToMove = line.words.splice(splitAt);
+                    const newLine = {
+                        words: wordsToMove,
+                        structure_tags: [],
+                        time: { start: wordsToMove[0].time.start, end: wordsToMove[wordsToMove.length - 1].time.end },
+                        max_layout: { position: {x:0, y:0}, size: {width:0, height:0} }
+                    };
+                    if (line.words.length > 0) {
+                        line.time.end = line.words[line.words.length - 1].time.end;
+                    }
+                    documentState.segments[segIndex].lines.splice(lineIndex + 1, 0, newLine);
+                    render();
+                }
+            }
+            function mergeLines(segIndex, lineIndex) {
+                if (lineIndex + 1 < documentState.segments[segIndex].lines.length) {
+                    const nextLineWords = documentState.segments[segIndex].lines[lineIndex + 1].words;
+                    documentState.segments[segIndex].lines[lineIndex].words.push(...nextLineWords);
+                    const combinedLine = documentState.segments[segIndex].lines[lineIndex];
+                    if (combinedLine.words.length > 0) {
+                        combinedLine.time.start = combinedLine.words[0].time.start;
+                        combinedLine.time.end = combinedLine.words[combinedLine.words.length - 1].time.end;
+                    }
+                    documentState.segments[segIndex].lines.splice(lineIndex + 1, 1);
+                    render();
+                }
+            }
+            function splitSegments(segIndex, lineIndex) {
+                const segment = documentState.segments[segIndex];
+                const splitAt = lineIndex + 1;
+                if (splitAt > 0 && splitAt < segment.lines.length) {
+                    const linesToMove = segment.lines.splice(splitAt);
+                    const newSegment = {
+                        lines: linesToMove,
+                        structure_tags: [],
+                        time: {
+                            start: linesToMove[0].time.start,
+                            end: linesToMove[linesToMove.length - 1].time.end
+                        },
+                        max_layout: { position: {x:0, y:0}, size: {width:0, height:0} }
+                    };
+                    if (segment.lines.length > 0) {
+                        segment.time.end = segment.lines[segment.lines.length - 1].time.end;
+                    }
+                    documentState.segments.splice(segIndex + 1, 0, newSegment);
+                    render();
+                }
+            }
+            function mergeSegments(segIndex) {
+                if (segIndex + 1 < documentState.segments.length) {
+                    const nextSegmentLines = documentState.segments[segIndex + 1].lines;
+                    documentState.segments[segIndex].lines.push(...nextSegmentLines);
+                    const combinedSegment = documentState.segments[segIndex];
+                    if (combinedSegment.lines.length > 0) {
+                        combinedSegment.time.start = combinedSegment.lines[0].time.start;
+                        combinedSegment.time.end = combinedSegment.lines[combinedSegment.lines.length - 1].time.end;
+                    }
+                    documentState.segments.splice(segIndex + 1, 1);
+                    render();
+                }
+            }
+            document.getElementById('modal-save').addEventListener('click', () => {
+                if (currentEditingWord) {
+                    const { segIndex, lineIndex, wordIndex } = currentEditingWord;
+                    const tagsText = document.getElementById('modal-tags').value;
+                    const tagNames = tagsText.split(',').map(t => t.trim()).filter(t => t);
+                    documentState.segments[segIndex].lines[lineIndex].words[wordIndex].semantic_tags =
+                        tagNames.map(name => ({ name }));
+                    tagModal.classList.remove('show');
+                    currentEditingWord = null;
+                    render();
+                }
+            });
+            document.getElementById('modal-cancel').addEventListener('click', () => {
+                tagModal.classList.remove('show');
+                currentEditingWord = null;
+            });
+            document.addEventListener('click', (e) => {
+                if (currentWordDropdown && !e.target.closest('.word-dropdown')) {
+                    currentWordDropdown.remove();
+                    currentWordDropdown = null;
+                }
+            });
+            document.getElementById('save-btn').addEventListener('click', () => {
+                documentState.segments.forEach(seg => {
+                    if (seg.lines && seg.lines.length > 0) {
+                        seg.lines.forEach(line => {
+                            if (line.words && line.words.length > 0) {
+                                line.time.start = line.words[0].time.start;
+                                line.time.end = line.words[line.words.length - 1].time.end;
+                            }
+                        });
+                        seg.time.start = seg.lines[0].time.start;
+                        seg.time.end = seg.lines[seg.lines.length - 1].time.end;
+                    }
+                });
+                sendDataToPython({ "action": "save", "document": documentState });
+            });
+            document.getElementById('cancel-btn').addEventListener('click', () => {
+                sendDataToPython({ "action": "cancel" });
+            });
+            render();
+        }
+        window.addEventListener("message", onDataFromPython);
+        init();
+        setFrameHeight(700);
+    </script>
+</body>
+</html>

requirements.txt CHANGED Viewed

@@ -1,3 +1,2 @@
-altair
-pandas
-streamlit


1	+ streamlit
2	+ git+https://github.com/francozanardi/pycaps.git

src/.streamlit/config.toml ADDED Viewed

	@@ -0,0 +1,9 @@

+[server]
+enableXsrfProtection = false
+enableCORS = false
+[client]
+showErrorDetails = true
+[browser]
+gatherUsageStats = false

src/streamlit_app.py CHANGED Viewed

@@ -1,40 +1,245 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
-"""
-# Welcome to Streamlit!
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))

 import streamlit as st
+import os
+import tempfile
+from pathlib import Path
+import shutil
+import uuid
+import glob
+from editor import subtitle_editor
+from pycaps import Document, WhisperAudioTranscriber, TemplateLoader, logger
+from pycaps.api import ApiKeyService
+import pycaps.video.render.audio_utils as audio_utils
+import logging
+MAX_CONCURRENT_JOBS = 2
+LOCK_DIR = os.path.join(tempfile.gettempdir(), "pycaps_locks")
+os.makedirs(LOCK_DIR, exist_ok=True)
+MAX_VIDEO_SIZE = 50 * 1024 * 1024
+logger.set_logging_level(logging.DEBUG)
+def acquire_lock_slot():
+    current_jobs = glob.glob(os.path.join(LOCK_DIR, "*.lock"))
+    if len(current_jobs) >= MAX_CONCURRENT_JOBS: return None
+    lock_id = str(uuid.uuid4())
+    lock_file_path = os.path.join(LOCK_DIR, f"{lock_id}.lock")
+    with open(lock_file_path, "w") as f: f.write(str(os.getpid()))
+    return lock_file_path
+def release_lock_slot(lock_file_path):
+    if lock_file_path and os.path.exists(lock_file_path):
+        try: os.remove(lock_file_path)
+        except OSError: pass
+def get_queue_status():
+    current_jobs = len(glob.glob(os.path.join(LOCK_DIR, "*.lock")))
+    return current_jobs, MAX_CONCURRENT_JOBS
+def setup_api_keys(key_type: str, key: str):
+    if key:
+        if key_type == "Pycaps API (Recommended)": ApiKeyService.set(key)
+        elif key_type == "OpenAI API": os.environ["PYCAPS_OPENAI_API_KEY"] = key
+def cleanup_api_keys():
+    if ApiKeyService.has(): ApiKeyService.remove()
+    if "PYCAPS_OPENAI_API_KEY" in os.environ: del os.environ["PYCAPS_OPENAI_API_KEY"]
+def display_video(video_path):
+    with st.container():
+        st.video(video_path)
+        with open(video_path, "rb") as file: video_bytes = file.read()
+        st.download_button("⬇️ Download Video", video_bytes, f"pycaps_{Path(video_path).stem}.mp4", "video/mp4")
+def build_pipeline_from_state():
+    if not st.session_state.video_path or not st.session_state.selected_template:
+        return None
+    builder = TemplateLoader(st.session_state.selected_template).with_input_video(st.session_state.video_path).load(False)
+    pipeline = builder.build()
+    return pipeline
+def go_to_step(step): st.session_state.current_step = step
+def reset_all():
+    persisted_keys = ['api_key_type', 'api_key_input']
+    if 'video_path' in st.session_state and st.session_state.video_path and os.path.exists(st.session_state.video_path):
+        os.remove(st.session_state.video_path)
+    for key in list(st.session_state.keys()):
+        if key not in persisted_keys: del st.session_state[key]
+    go_to_step(1)
+if 'current_step' not in st.session_state: st.session_state.current_step = 1
+if 'video_path' not in st.session_state: st.session_state.video_path = None
+if 'transcribed_doc' not in st.session_state: st.session_state.transcribed_doc = None
+if 'processed_doc' not in st.session_state: st.session_state.processed_doc = None
+if 'edit_requested' not in st.session_state: st.session_state.edit_requested = False
+if 'final_video_path' not in st.session_state: st.session_state.final_video_path = None
+if 'session_id' not in st.session_state: st.session_state.session_id = str(uuid.uuid4())
+if 'selected_template' not in st.session_state: st.session_state.selected_template = None
+st.set_page_config(layout="wide", page_title="Pycaps Demo")
+st.title("🎬 Pycaps Demo")
+st.markdown(f"""
+<style>
+.stElementContainer > video {{
+  max-height: 60vh;
+}}
+</style>
+""", unsafe_allow_html=True)
+with st.sidebar:
+    st.header("⚙️ API Configuration")
+    api_key_type = st.radio("Select API Key Type", ("Pycaps API (Recommended)", "OpenAI API"), key="api_key_type")
+    api_key = st.text_input("Enter your API Key", type="password", key="api_key_input")
+    st.markdown("---")
+    active_jobs, max_jobs = get_queue_status()
+    st.metric(label="Jobs Running", value=f"{active_jobs} / {max_jobs}")
+# ==============================================================================
+# STEP 1: UPLOAD & TRANSCRIBE
+# ==============================================================================
+if st.session_state.current_step == 1:
+    st.header("Upload Your Video")
+    uploaded_file = st.file_uploader("Select a video file (max 50MB)", type=["mp4", "mov"], key=f"uploader_{st.session_state.session_id}")
+    if uploaded_file:
+        if uploaded_file.size > MAX_VIDEO_SIZE:
+            st.error(f"File is too large ({uploaded_file.size / (1024*1024):.1f}MB). Max is {MAX_VIDEO_SIZE // (1024*1024)}MB.")
+        elif st.button("Start", type="primary"):
+            with tempfile.TemporaryDirectory() as temp_dir:
+                video_path = Path(temp_dir) / uploaded_file.name
+                with open(video_path, "wb") as f: f.write(uploaded_file.getbuffer())
+                with st.spinner("Analyzing audio... 🎧"):
+                    try:
+                        audio_path = os.path.join(temp_dir, "audio.wav")
+                        audio_utils.extract_audio_for_whisper(str(video_path), audio_path)
+                        transcriber = WhisperAudioTranscriber(model_size="base")
+                        document = transcriber.transcribe(audio_path)
+                        st.session_state.transcribed_doc = document.to_dict()
+                        persisted_path = os.path.join(tempfile.gettempdir(), f"session_{st.session_state.session_id}.mp4")
+                        shutil.copy(video_path, persisted_path)
+                        st.session_state.video_path = persisted_path
+                        go_to_step(2)
+                        st.rerun()
+                    except Exception as e:
+                        st.error(f"Transcription failed: {e}")
+                        import traceback; traceback.print_exc()
+# ==============================================================================
+# STEP 2: CONFIGURE TEMPLATE AND PROCESS
+# ==============================================================================
+elif st.session_state.current_step == 2:
+    st.header("Configure & Process")
+    template_name = st.selectbox("Choose a Style", ["classic", "word-focus", "line-focus", "minimalist", "neo-minimal", "hype", "retro-gaming", "vibrant"])
+    st.session_state.edit_requested = st.checkbox("I want to review and edit the processed subtitles before rendering.", value=st.session_state.edit_requested)
+    if st.button("Next", type="primary"):
+        st.session_state.selected_template = template_name
+        with st.spinner("Applying template, effects, and tags... ⚙️"):
+            try:
+                pipeline = build_pipeline_from_state()
+                if not pipeline:
+                    raise RuntimeError("Could not build pipeline. Missing video or template selection.")
+                setup_api_keys(api_key_type, api_key)
+                pipeline.prepare()
+                document = Document.from_dict(st.session_state.transcribed_doc)
+                processed_document = pipeline.process_document(document)
+                pipeline.close()
+                st.session_state.processed_doc = processed_document.to_dict()
+                go_to_step(3)
+                st.rerun()
+            except Exception as e:
+                st.error(f"Processing failed: {e}")
+                import traceback; traceback.print_exc()
+            finally:
+                cleanup_api_keys()
+    if st.button("⬅️ Back"): reset_all(); st.rerun()
+# ==============================================================================
+# STEP 3: EDIT (OPTIONAL) & RENDER
+# ==============================================================================
+elif st.session_state.current_step == 3:
+    if st.session_state.edit_requested:
+        st.header("Edit Subtitles")
+        st.markdown("Make your changes in the editor below. Your progress is saved automatically when you click 'Save' or 'Cancel'.")
+        editor_result = subtitle_editor(
+            initial_document=st.session_state.processed_doc,
+            key=f"editor_{st.session_state.session_id}"
+        )
+        if editor_result is not None:
+            if editor_result.get("action") == "save":
+                st.session_state.processed_doc = editor_result.get("document")
+                st.toast("✅ Subtitles saved!")
+            elif editor_result.get("action") == "cancel":
+                st.toast("Editing cancelled.")
+            go_to_step(4)
+            st.rerun()
+    else:
+        go_to_step(4)
+        st.rerun()
+# ==============================================================================
+# STEP 4: RENDER & VIEW
+# ==============================================================================
+elif st.session_state.current_step == 4:
+    st.header("Final Render")
+    lock_file = acquire_lock_slot()
+    if not lock_file:
+        st.warning("🚧 Renderer is at full capacity. Please try again.")
+        if st.button("⬅️ Go Back to Configuration"): go_to_step(2); st.rerun()
+    else:
+        try:
+            with st.spinner("Rendering final video... This is the last step! 🎬"):
+                pipeline = build_pipeline_from_state()
+                if not pipeline:
+                    raise RuntimeError("Could not build pipeline for rendering.")
+                setup_api_keys(api_key_type, api_key)
+                pipeline.prepare()
+                document_to_render = Document.from_dict(st.session_state.processed_doc)
+                pipeline.render(document_to_render)
+                if pipeline._output_video_path and os.path.exists(pipeline._output_video_path):
+                    st.session_state.final_video_path = pipeline._output_video_path
+                    go_to_step(5)
+                    st.rerun()
+                else:
+                    st.error("Render failed. Check the logs.")
+        finally:
+            release_lock_slot(lock_file)
+            if 'pipeline_instance' in st.session_state:
+                st.session_state.pipeline_instance.close()
+                del st.session_state.pipeline_instance
+# ==============================================================================
+# STEP 5: VIEW & DOWNLOAD
+# ==============================================================================
+elif st.session_state.current_step == 5:
+    st.header("Your Video is Ready!")
+    if 'final_video_path' in st.session_state and st.session_state.final_video_path:
+        display_video(st.session_state.final_video_path)
+    else:
+        st.error("Could not find the final video.")
+    col1, col2 = st.columns(2)
+    with col1:
+        if st.button("⬅️ Choose Another Style", use_container_width=True):
+            keys_to_delete = ['processed_doc', 'final_video_path', 'edit_requested']
+            for key in keys_to_delete:
+                if key in st.session_state: del st.session_state[key]
+            go_to_step(2)
+            st.rerun()
+    with col2:
+        if st.button("🏠 Start with a New Video", use_container_width=True):
+            reset_all()
+            st.rerun()