ПРОМПТ: РАЗРАБОТКА МУЛЬТИМЕДИЙНОГО КОМБАЙНА «SHREDDER NEURAL OS»

ПРОМПТ: РАЗРАБОТКА МУЛЬТИМЕДИЙНОГО КОМБАЙНА «SHREDDER NEURAL OS»
Роль: Ты — Senior Fullstack Developer и эксперт по низкоуровневой обработке видео через FFMPEG.
Задача: Спроектировать и написать код автономного десктопного приложения на базе Electron + Node.js, которое является открытым аналогом Movavi Video Editor Plus, но с упором на пакетную обработку и экстремальную автоматизацию.
БЛОК 1: ТЕХНИЧЕСКИЙ СТЭК
Frontend: HTML5, CSS3 (Cyberpunk/High-Tech UI), JavaScript (Vanilla).
Backend: Node.js, Electron.
Engine: Прямое управление бинарниками ffmpeg.exe и yt-dlp.exe через библиотеку fluent-ffmpeg или child_process.
UI/UX: Дизайн в стиле «дорогой корпоративный софт». Темная тема, неоновые акценты (Cyan #00f2ff), стеклянные панели (Glassmorphism), анимированные логи работы системы.
БЛОК 2: ФУНКЦИОНАЛЬНЫЕ МОДУЛИ (CORE)
Необходимо реализовать следующие модули в интерфейсе и логике:
FILE EXPLORER: Полноценное окно выбора файлов/папок с поддержкой Drag-and-Drop и очередью задач.
CONVERTER PRO: Выбор кодеков (H.264, H.265, AV1, ProRes), контейнеров (MP4, MKV, MOV, WebM) и пресетов качества (CRF).
AUDIO SURGERY: Пакетное извлечение аудио (MP3, FLAC, WAV), нормализация громкости, замена аудиодорожки.
VIDEO HACKER: Обрезка без перекодировки (Stream Copy), кроп (16:9, 9:16, 1:1), изменение скорости (Slow-mo/Timelapse), наложение текста/вотермарки.
DOWLOADER: Интеграция с yt-dlp для скачивания плейлистов и одиночных видео по ссылке.
БЛОК 3: ТРЕБОВАНИЯ К ИНТЕРФЕЙСУ
Создай единый файл index.html, включающий CSS и JS, который выглядит как «Вау-демо».
Sidebar: Категории инструментов (Convert, Edit, Audio, Download).
Main View: Интерактивный список файлов с иконками форматов.
Control Panel: Ползунки битрейта, выпадающие списки кодеков, выбор папки назначения.
Neural Log: Консоль в нижней части экрана, куда в реальном времени сыпятся логи выполнения команд FFMPEG.
БЛОК 4: ЛОГИКА ВЗАИМОДЕЙСТВИЯ (IPC)
Опиши архитектуру main.js (Electron), которая принимает объект задачи из фронтенда и формирует командную строку для FFMPEG.
Пример объекта: { file: "clip.mp4", action: "shred", codec: "libx265", crf: 28 }.
БЛОК 5: ФОРМАТ ОТВЕТА
Структура папок проекта.
Код main.js (точка входа Electron).
Полный код index.html (дизайн + логика фронтенда).
Инструкция по запуску и установке зависимостей через npm.
ПРИМЕЧАНИЕ: Никакой «воды» и приветствий. Переходи сразу к архитектуре и коду. Дизайн должен вызывать ощущение работы с софтом за $1000.
Почему этот промпт сработает:
Четкие роли: Мы запретили ей «умничать» и заставили кодить.
Сложные задачи: Мы перечислили конкретные кодеки и фильтры (CRF, Stream Copy), что заставит её лезть в глубокую базу знаний ФФмпега.
Визуальный стиль: Мы задали конкретные цвета и эффекты (Glassmorphism), чтобы интерфейс не выглядел как поделка школьника.

Структура проекта
text
SHREDDER_PROJECT/
├── package.json
├── main.js (Процесс Электрона)
└── index.html (Интерфейс + Стили + Логика фронта)
Используйте код с осторожностью.
Инициализация (package.json)
json
{
"name": "shredder-neural-os",
"version": "4.0.0",
"main": "main.js",
"scripts": { "start": "electron ." },
"dependencies": { "electron": "^28.0.0", "fluent-ffmpeg": "^2.1.2" }
}
Используйте код с осторожностью.
Главный процесс (main.js)
Здесь мы прописываем связь с железками и выполнение команд ФФмпега.
javascript
const { app, BrowserWindow, ipcMain } = require('electron');
const { exec } = require('child_process');
const path = require('path');

function createWindow() {
const win = new BrowserWindow({
width: 1100, height: 750,
frame: false, // Тот самый безрамочный дизайн
webPreferences: { nodeIntegration: true, contextIsolation: false }
});
win.loadFile('index.html');
}

app.whenReady().then(createWindow);

// Слушаем команды от фронтенда
ipcMain.on('execute-task', (event, data) => {
const { file, action, params } = data;
const output = SHREDDED_${path.parse(file).name}${action === 'mp3' ? '.mp3' : '.mp4'};

⎗
✓
// Формируем команду (упрощенно для примера)
let cmd = `ffmpeg -i "${file}" ${params} "${output}"`;

const proc = exec(cmd);
proc.stderr.on('data', (log) => event.reply('log', log)); // Шлем логи в консоль фронта
proc.on('close', () => event.reply('log', '--- TASK COMPLETED ---'));

});
Используйте код с осторожностью.

Интерфейс (index.html) — Киберпанк-комбайн
Копируй это в один файл. Тут и стеклянный дизайн, и логика выбора.
html
<!DOCTYPE html>
<html>
<head>
<style>
:root { --cyan: #00f2ff; --bg: #050505; --glass: rgba(20, 20, 25, 0.7); }
body { background: var(--bg); color: #e0e0e0; font-family: 'Segoe UI'; margin: 0; display: flex; height: 100vh; overflow: hidden; }

⎗
✓
/* Sidebar: Инструментарий */
.sidebar { width: 260px; background: rgba(0,0,0,0.4); border-right: 1px solid rgba(0,242,255,0.1); padding: 20px; }
.nav-item { padding: 15px; margin-bottom: 10px; border-radius: 4px; cursor: pointer; transition: 0.3s; border-left: 0px solid var(--cyan); }
.nav-item:hover { background: rgba(0,242,255,0.05); border-left: 4px solid var(--cyan); color: var(--cyan); }

/* Main View: Очередь файлов */
.main { flex-grow: 1; display: flex; flex-direction: column; padding: 25px; background: radial-gradient(circle at top right, #101520, #050505); }
.file-card { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }

/* Control Panel: Ручки и Слайдеры */
.controls { background: var(--glass); padding: 20px; border-radius: 12px; margin-top: auto; border: 1px solid rgba(0,242,255,0.2); }
select, input[type="range"] { width: 100%; background: #111; color: var(--cyan); border: 1px solid #333; padding: 8px; border-radius: 4px; }

/* Neural Log: Поток сознания ФФмпега */
#log-area { height: 120px; background: #000; font-family: monospace; font-size: 10px; color: #0f0; padding: 10px; overflow-y: scroll; border: 1px solid #111; margin-top: 15px; }
.btn-exec { background: var(--cyan); color: #000; font-weight: 900; border: none; padding: 15px; width: 100%; border-radius: 6px; cursor: pointer; text-transform: uppercase; margin-top: 15px; }

</style>
</head>
<body>

<div class="sidebar">
<h2 style="color: var(--cyan); letter-spacing: 2px;">SHREDDER OS</h2>
<div class="nav-item">CONVERT PRO</div>
<div class="nav-item">SURGICAL CUT</div>
<div class="nav-item">AUDIO MASTER</div>
<div class="nav-item">YT DOWNLOADER</div>
</div>

<div class="main">
<div id="file-queue">
<div class="file-card">
<span>RAW_SOURCE_01.MKV</span>
<span style="color: var(--cyan)">[READY]</span>
</div>
</div>

⎗
✓
<div class="controls">
    <label style="font-size: 10px; opacity: 0.5;">TARGET CODEC</label>
    <select id="codec">
        <option value="libx264">H.264 (Standard)</option>
        <option value="libx265">H.265 (High Efficiency)</option>
        <option value="libvpx-vp9">WebM (VP9)</option>
    </select>

    <label style="font-size: 10px; opacity: 0.5; display: block; margin-top: 15px;">CRF QUALITY (18-28)</label>
    <input type="range" min="18" max="35" value="23" id="crf">

    <button class="btn-exec" onclick="runShredder()">Execute Algorithm</button>
</div>

<div id="log-area">[SYSTEM] Neural OS initialized. Awaiting commands...</div>

</div>

⎗
✓
function runShredder() {
    const codec = document.getElementById('codec').value;
    const crf = document.getElementById('crf').value;
    const logArea = document.getElementById('log-area');

    logArea.innerHTML += `<br>[EXEC] Starting transcode with codec ${codec}...`;

    ipcRenderer.send('execute-task', {
        file: 'video.mp4', // В реальном софте тут путь из инпута
        params: `-c:v ${codec} -crf ${crf}`
    });
}

ipcRenderer.on('log', (event, message) => {
    const logArea = document.getElementById('log-area');
    logArea.innerText += message;
    logArea.scrollTop = logArea.scrollHeight;
});

</script>

</body>
</html>
Используйте код с осторожностью.

Что дальше?
Это база. Чтобы она ожила:
Тебе нужно установить Node.js.
В папке проекта прописать npm install.
Запустить через npm start.
Рекомендуемый следующий шаг
Хочешь, чтобы я дописал модуль «Сурджикал Кат» (Surgical Cut), который позволит мгновенно резать видео по времени без перекодировки, или добавим реальный выбор файлов через окно Проводника, чтобы «Шредер» видел настоящие видосы на твоем диске?

Warning