http://gs-permakultura-v-ukran.mozello.com/ux-1/ Пермакультура - UX http://gs-permakultura-v-ukran.mozello.com/ux-1/params/post/5255060/persha-novina Tue, 19 May 2026 00:28:00 +0000 <p>1</p><p><br></p> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YouTube Blog Article Generator</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap Icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <style> body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } .preview-box { background-color: #ffffff; color: #212529; border-radius: 8px; } [data-bs-theme="dark"] .preview-box { background-color: #1e1e1e; color: #e0e0e0; } code-block { font-family: monospace; white-space: pre-wrap; } </style> <!-- Шапка / Навігація --> <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom"> <div class="container-fluid"> <a class="navbar-brand fw-bold" href="#"> <i class="bi bi-youtube text-danger"></i> YouTube Article Generator </a> <button class="btn btn-outline-secondary btn-sm" id="themeToggle" type="button"> <i class="bi bi-moon-stars-fill"></i> Tema </button> </div> </nav> <!-- Основна частина --> <main class="container my-4"> <!-- Панель вводу та ключів --> <div class="card shadow-sm mb-4"> <div class="card-body"> <h5 class="card-title mb-3"><i class="bi bi-gear-fill text-primary"></i> Налаштування та вхідні дані</h5> <div class="mb-3"> <label for="apiKey" class="form-label font-monospace">OpenAI API Key (потрібен для генерації):</label> <input type="password" id="apiKey" class="form-control" placeholder="sk-proj-..."> <div class="form-text">Ключ зберігається лише у вашому браузері та не передається на сторонні сервери.</div> </div> <div class="mb-3"> <label for="youtubeUrl" class="form-label fw-bold">Посилання на YouTube відео або текст транскрипту:</label> <div class="input-group"> <input type="text" id="youtubeUrl" class="form-control form-control-lg" placeholder="https://www.youtube.com/watch?v=... або вставте текст субтитрів"> <button class="btn btn-primary px-4 fw-bold" type="button" id="generateBtn"> Згенерувати статтю </button> </div> </div> <!-- Індикатор прогресу --> <div class="progress d-none mt-3" style="height: 10px;" id="progressBarContainer"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" id="progressBar" role="progressbar" style="width: 100%"></div> </div> <div id="statusText" class="form-text text-center mt-1 text-info"></div> </div> </div> <!-- Блок результатів --> <div class="card shadow-sm d-none" id="resultCard"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" id="resultTabs" role="tablist"> <li class="nav-item"> <button class="nav-link active" id="preview-tab" data-bs-toggle="tab" data-bs-target="#previewPane" type="button">Візуальний перегляд</button> </li> <li class="nav-item"> <button class="nav-link" id="html-tab" data-bs-toggle="tab" data-bs-target="#htmlPane" type="button">HTML Код</button> </li> <li class="nav-item"> <button class="nav-link" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seoPane" type="button">SEO Метадані</button> </li> </ul> </div> <div class="card-body"> <div class="tab-content" id="resultTabContent"> <!-- Вкладка Попередній перегляд --> <div class="tab-pane fade show active" id="previewPane" role="tabpanel"> <div class="d-flex justify-content-end mb-3"> <button class="btn btn-sm btn-outline-success me-2" id="copyTextBtn"> <i class="bi bi-file-earmark-text"></i> Скопіювати як текст </button> </div> <div class="preview-box p-4 border rounded shadow-sm" id="previewContainer"></div> </div> <!-- Вкладка HTML --> <div class="tab-pane fade" id="htmlPane" role="tabpanel"> <div class="d-flex justify-content-end mb-3"> <button class="btn btn-sm btn-outline-primary" id="copyHtmlBtn"> <i class="bi bi-clipboard"></i> Скопіювати HTML код </button> </div> <pre class="p-3 bg-dark text-light rounded overflow-auto" style="max-height: 600px;"><code id="htmlCodeContainer"></code></pre> </div> <!-- Вкладка SEO --> <div class="tab-pane fade" id="seoPane" role="tabpanel"> <div id="seoContainer" class="row g-3"></div> </div> </div> </div> </div> </main> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <!-- Фронтенд Логіка Скрипта --> <script> document.addEventListener('DOMContentLoaded', () => { const themeToggle = document.getElementById('themeToggle'); const generateBtn = document.getElementById('generateBtn'); const youtubeUrlInput = document.getElementById('youtubeUrl'); const apiKeyInput = document.getElementById('apiKey'); const spinner = document.getElementById('spinner'); const progressBarContainer = document.getElementById('progressBarContainer'); const statusText = document.getElementById('statusText'); const resultCard = document.getElementById('resultCard'); const previewContainer = document.getElementById('previewContainer'); const htmlCodeContainer = document.getElementById('htmlCodeContainer'); const seoContainer = document.getElementById('seoContainer'); // Автозбереження API ключа в LocalStorage браузера if (localStorage.getItem('openai_api_key')) { apiKeyInput.value = localStorage.getItem('openai_api_key'); } apiKeyInput.addEventListener('change', () => { localStorage.setItem('openai_api_key', apiKeyInput.value.trim()); }); // Перемикач темно/світлої теми themeToggle.addEventListener('click', () => { const htmlElement = document.documentElement; const currentTheme = htmlElement.getAttribute('data-bs-theme'); const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; htmlElement.setAttribute('data-bs-theme', newTheme); }); // Обробник натискання кнопки Генерації generateBtn.addEventListener('click', async () => { const inputData = youtubeUrlInput.value.trim(); const apiKey = apiKeyInput.value.trim(); if (!apiKey) { alert('Будь ласка, введіть свій OpenAI API Key.'); return; } if (!inputData) { alert('Введіть текст субтитрів або посилання.'); return; } // Старт анімації завантаження generateBtn.disabled = true; spinner.classList.remove('d-none'); progressBarContainer.classList.remove('d-none'); statusText.textContent = "ШІ аналізує та переписує текст у професійну статтю..."; resultCard.classList.add('d-none'); try { const generatedData = await generateArticleWithOpenAI(inputData, apiKey); // Відображення результатів previewContainer.innerHTML = generatedData.htmlArticle; htmlCodeContainer.textContent = generatedData.htmlArticle; // Заповнення SEO блоку const seo = generatedData.seo || {}; seoContainer.innerHTML = ` <div class="col-md-6"><strong>SEO Title:</strong> <div class="border p-2 rounded bg-body-tertiary">${seo.title || '-'}</div></div> <div class="col-md-6"><strong>Slug:</strong> <div class="border p-2 rounded bg-body-tertiary">${seo.slug || '-'}</div></div> <div class="col-12"><strong>Description:</strong> <div class="border p-2 rounded bg-body-tertiary">${seo.description || '-'}</div></div> <div class="col-md-4"><strong>Час читання:</strong> <div class="border p-2 rounded bg-body-tertiary">${seo.readingTime || '-'}</div></div> <div class="col-md-4"><strong>Слів у статті:</strong> <div class="border p-2 rounded bg-body-tertiary">${seo.wordCount || '-'}</div></div> <div class="col-md-4"><strong>Ключові слова:</strong> <div class="border p-2 rounded bg-body-tertiary">${(seo.keywords || []).join(', ')}</div></div> `; resultCard.classList.remove('d-none'); } catch (error) { alert(`Помилка генерації: ${error.message}`); } finally { generateBtn.disabled = false; spinner.classList.add('d-none'); progressBarContainer.classList.add('d-none'); statusText.textContent = ""; } }); // Прямий запит до OpenAI API з фронтенду async function generateArticleWithOpenAI(textContext, apiKey) { const systemPrompt = `Ви — провідний український журналіст, SEO-експерт та фронтенд-розробник. Перетворіть наданий текст/субтитри у якісну, структуровану, глибоку статтю українською мовою. ВИМОГИ: 1. НІКОЛИ не копіюйте текст слово в слово. Перепишіть повністю у журналістському стилі. 2. Використовуйте семантичний HTML5 (теги: <article>, <header>, <section>, <h2>, <h3>, <p>, <ul>, <ol>, <li>, <blockquote>, <table>, <thead>, <tbody>, <tr>, <td>, <strong>). 3. Структура: Заголовок H1, Вступ, Кілька розділів H2, Цитати, Таблиця або список, FAQ (з <details> та <summary>), Висновки. 4. Мова: природна українська без росіянізмів та AI-кліше. Видайте ВІДПОВІДЬ СУВОРO В JSON ФОРМАТІ: { "htmlArticle": "string з HTML кодом статті", "seo": { "title": "Заголовок для SEO", "description": "Опис для метатагу description", "slug": "chytatylnyy-url-slug", "keywords": ["слово1", "слово2"], "readingTime": "X хв", "wordCount": 1000 } }`; const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` }, body: JSON.stringify({ model: 'gpt-4o', response_format: { type: "json_object" }, messages: [ { role: 'system', content: systemPrompt }, { role: 'user', content: `Ось вихідний текст:\n\n${textContext}` } ], temperature: 0.5 }) }); if (!response.ok) { const errData = await response.json(); throw new Error(errData.error?.message || 'Помилка запиту до OpenAI'); } const data = await response.json(); return JSON.parse(data.choices[0].message.content); } // Копіювання в буфер document.getElementById('copyHtmlBtn').addEventListener('click', () => { navigator.clipboard.writeText(htmlCodeContainer.textContent); alert('HTML код успішно скопійовано!'); }); document.getElementById('copyTextBtn').addEventListener('click', () => { navigator.clipboard.writeText(previewContainer.innerText); alert('Текст статті скопійовано!'); }); }); </script>