feat: додано перемикач мови та теми, покращено інтерфейс

- Додано перемикач мови (українська/англійська) у заголовку сторінки. - Додано перемикач теми (світла/темна) з відповідними стилями. - Оновлено тексти інтерфейсу для підтримки двох мов. - Додано функцію збереження вибраної мови та теми у Local Storage. - Додано кнопку для завантаження згенерованого промпту. - Оновлено стилі для кнопок та інших елементів інтерфейсу. - Виправлено помилки та покращено логіку роботи з буфером обміну.
cr1ma · Oct 12, 2024 · 5a3aa40 · 5a3aa40
1 parent 0fb24df
commit 5a3aa40
Show file tree

Hide file tree

Showing 4 changed files with 324 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -11,12 +11,25 @@
 <body>
     <div class="container">
         <header>
-            <h1>NeuroCommit</h1>
-            <p>Перетворіть свій <code>git diff</code> у готовий промт для нейромережі та зробіть свій коміт кращим!</p>
+            <div class="header-top">
+                <h1>NeuroCommit</h1>
+                <div class="language-switcher">
+                    <button id="langUk" class="active">УКР</button>
+                    <button id="langEn">ENG</button>
+                </div>
+                <div class="theme-switcher">
+                    <label class="switch">
+                        <input type="checkbox" id="themeToggle">
+                        <span class="slider"></span>
+                    </label>
+                    <span id="themeLabel">Темна тема</span>
+                </div>
+            </div>
+            <p id="headerDescription">Перетворіть свій <code>git diff</code> у готовий промт для нейромережі та зробіть свій коміт кращим!</p>
         </header>
         <main>
             <div class="split left">
-                <h2>Вивід команди git diff</h2>
+                <h2 id="gitDiffTitle">Вивід команди git diff</h2>
                 <div class="textarea-controls">
                     <button id="pasteButton">Вставити з буфера</button>
                     <button id="clearButton">Очистити поле</button>
@@ -35,11 +48,14 @@ <h3>Команди для отримання git diff</h3>
                 </div>
             </div>
             <div class="split right">
-                <h2>Згенерований промт для нейромережі</h2>
+                <h2 id="promptTitle">Згенерований промт для нейромережі</h2>
                 <div class="prompt-container">
                     <pre id="promptOutput" class="prompt"></pre>
                 </div>
-                <button id="copyButton">Скопіювати промт</button>
+                <div class="prompt-buttons">
+                    <button id="copyButton">Скопіювати промт</button>
+                    <button id="downloadButton">Завантажити промт</button>
+                </div>
             </div>
         </main>
         <footer>

diff --git a/prompt_en.txt b/prompt_en.txt
@@ -0,0 +1,32 @@
+You are an expert in writing commit messages for repositories. Your task is to write me a commit message based on my diff file, which I will provide to you.
+
+### Rules for writing a commit message:
+1. Write in English, strictly considering the context.
+2. Return the answer using markdown formatting.
+3. Use the imperative mood, as if you are giving a command to the system that corresponds to messages that create changes in the code.
+4. The first line of the message (title) should be short, usually no longer than 50 characters. This makes it easier to quickly understand the changes. Do not end the title with a period.
+5. Leave one empty line after the title before starting the body of the message. This separation helps Git tools to correctly display the message text.
+6. Commits with messages like "Fix" or "Update" do not provide useful information. Always explain what exactly was fixed or updated.
+7. **Use lowercase letters to describe change types. Use** semantic tags in message titles:
+    - `feat:` — adding a new feature
+    - `fix:` — bug fixes
+    - `docs:` — changes in documentation
+    - `style:` — changes that do not affect the code (e.g., formatting fixes)
+    - `refactor:` — code change that doesn't add new functionality or fix bugs
+    - `test:` — adding or changing tests
+
+### Example of a correct commit message:
+```diff
+refactor: update environment configuration and API connection
+
+- Edited `.env` file to support different environments (production, development) and API connection modes (docker, local, remote).
+- Updated `config.py` to load tokens and URLs depending on the environment and API mode.
+- Removed logic for determining the operating system.
+- Updated `api_client.py` to use BASE_API_URL instead of OS-specific URLs.
+- Reduced the number of retries in `_make_request`.
+```
+
+### Output of the `git diff` command that I executed in my repository:
+```diff
+<diff>
+```
diff --git a/script.js b/script.js
@@ -2,22 +2,113 @@
 const gitDiffInput = document.getElementById('gitDiffInput');
 const promptOutput = document.getElementById('promptOutput');
 const copyButton = document.getElementById('copyButton');
+const downloadButton = document.getElementById('downloadButton');
 const toast = document.getElementById('toast');
 const pasteButton = document.getElementById('pasteButton');
 const clearButton = document.getElementById('clearButton');
 const copyCommandButtons = document.querySelectorAll('.copyCommandButton');
+const themeToggle = document.getElementById('themeToggle');
+const themeLabel = document.getElementById('themeLabel');
+const langUk = document.getElementById('langUk');
+const langEn = document.getElementById('langEn');
 
+// Тексти для підтримки мов
+const texts = {
+  uk: {
+    headerDescription: 'Перетворіть свій <code>git diff</code> у готовий промт для нейромережі та зробіть свій коміт кращим!',
+    gitDiffTitle: 'Вивід команди git diff',
+    pasteButton: 'Вставити з буфера',
+    clearButton: 'Очистити поле',
+    promptTitle: 'Згенерований промт для нейромережі',
+    copyButton: 'Скопіювати промт',
+    downloadButton: 'Завантажити промт',
+    themeLabelLight: 'Світла тема',
+    themeLabelDark: 'Темна тема',
+    gitCommandsTitle: 'Команди для отримання git diff',
+    copyCommand: 'Копіювати',
+    toastCopied: 'Промт успішно скопійовано в буфер обміну!',
+    toastError: 'Не вдалося виконати дію.',
+    toastPasted: 'Текст успішно вставлено з буфера обміну!',
+    toastCommandCopied: 'Команда скопійована в буфер обміну!',
+    placeholder: 'Вставте сюди результат команди git diff...',
+    footerText: 'Приєднуйтесь до розробки на GitHub'
+  },
+  en: {
+    headerDescription: 'Turn your <code>git diff</code> into a ready prompt for neural networks and make your commit better!',
+    gitDiffTitle: 'Output of git diff command',
+    pasteButton: 'Paste from clipboard',
+    clearButton: 'Clear field',
+    promptTitle: 'Generated prompt for neural network',
+    copyButton: 'Copy prompt',
+    downloadButton: 'Download prompt',
+    themeLabelLight: 'Light theme',
+    themeLabelDark: 'Dark theme',
+    gitCommandsTitle: 'Commands to get git diff',
+    copyCommand: 'Copy',
+    toastCopied: 'Prompt successfully copied to clipboard!',
+    toastError: 'Failed to perform the action.',
+    toastPasted: 'Text successfully pasted from clipboard!',
+    toastCommandCopied: 'Command copied to clipboard!',
+    placeholder: 'Paste the result of git diff command here...',
+    footerText: 'Join the development on GitHub'
+  }
+};
+
+let currentLang = localStorage.getItem('language') || 'uk';
 let promptTemplate = '';
 
-// Завантажуємо шаблон промпту з файлу prompt.txt
-fetch('prompt.txt')
-  .then(response => response.text())
-  .then(data => {
-    promptTemplate = data;
-  })
-  .catch(error => {
-    console.error('Помилка завантаження промпту:', error);
-  });
+// Функція для зміни мови інтерфейсу
+function setLanguage(lang) {
+  currentLang = lang;
+  localStorage.setItem('language', lang);
+  const t = texts[lang];
+
+  document.getElementById('headerDescription').innerHTML = t.headerDescription;
+  document.getElementById('gitDiffTitle').textContent = t.gitDiffTitle;
+  pasteButton.textContent = t.pasteButton;
+  clearButton.textContent = t.clearButton;
+  document.getElementById('promptTitle').textContent = t.promptTitle;
+  copyButton.textContent = t.copyButton;
+  downloadButton.textContent = t.downloadButton;
+  themeLabel.textContent = themeToggle.checked ? t.themeLabelLight : t.themeLabelDark;
+  document.querySelector('.git-commands h3').textContent = t.gitCommandsTitle;
+  document.querySelectorAll('.copyCommandButton').forEach(btn => btn.textContent = t.copyCommand);
+  gitDiffInput.placeholder = t.placeholder;
+  document.querySelector('footer p a').textContent = t.footerText;
+
+  // Змінюємо активний клас для кнопок мови
+  if (lang === 'uk') {
+    langUk.classList.add('active');
+    langEn.classList.remove('active');
+  } else {
+    langUk.classList.remove('active');
+    langEn.classList.add('active');
+  }
+
+  // Перезавантажуємо шаблон промпту
+  loadPromptTemplate();
+}
+
+// Завантажуємо шаблон промпту з файлу prompt.txt або prompt_en.txt
+function loadPromptTemplate() {
+  const promptFile = currentLang === 'uk' ? 'prompt.txt' : 'prompt_en.txt';
+  fetch(promptFile)
+    .then(response => response.text())
+    .then(data => {
+      promptTemplate = data;
+      updatePrompt();
+    })
+    .catch(error => {
+      console.error('Помилка завантаження промпту:', error);
+    });
+}
+
+// Ініціалізація мови при завантаженні сторінки
+setLanguage(currentLang);
+
+// Додаємо події для перемикачів мови
+langUk.addEventListener('click', () => setLanguage('uk'));
+langEn.addEventListener('click', () => setLanguage('en'));
 
 // Функція для екранування HTML, щоб уникнути XSS атак
 function escapeHTML(str) {
@@ -68,41 +159,66 @@ function updatePrompt() {
   const highlightedDiff = highlightDiff(sanitizedDiff);
   const filledPrompt = promptTemplate.replace("<diff>", highlightedDiff);
   promptOutput.innerHTML = filledPrompt;
+
+  // Зберігаємо gitDiff у Local Storage
+  localStorage.setItem('gitDiff', gitDiff);
 }
 
 // Слідкуємо за змінами у полі введення і автоматично оновлюємо промт
 gitDiffInput.addEventListener('input', updatePrompt);
 
+// Відновлюємо gitDiff з Local Storage
+if (localStorage.getItem('gitDiff')) {
+  gitDiffInput.value = localStorage.getItem('gitDiff');
+  updatePrompt();
+}
+
 // Обробляємо натискання кнопки "Скопіювати промт"
 copyButton.addEventListener('click', async () => {
   const textToCopy = promptOutput.textContent;
 
   try {
     await navigator.clipboard.writeText(textToCopy);
-    showToast('Промт успішно скопійовано в буфер обміну!', 'success');
+    showToast(texts[currentLang].toastCopied, 'success');
   } catch (err) {
     console.error('Не вдалося скопіювати текст: ', err);
-    showToast('Не вдалося скопіювати промт.', 'error');
+    showToast(texts[currentLang].toastError, 'error');
   }
 });
 
+// Обробляємо натискання кнопки "Завантажити промт"
+downloadButton.addEventListener('click', () => {
+  const text = promptOutput.textContent;
+  const blob = new Blob([text], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'prompt.txt';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+});
+
 // Обробляємо натискання кнопки "Вставити з буфера"
 pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText();
     gitDiffInput.value = text;
     updatePrompt();
-    showToast('Текст успішно вставлено з буфера обміну!', 'success');
+    showToast(texts[currentLang].toastPasted, 'success');
   } catch (err) {
     console.error('Не вдалося вставити текст з буфера обміну: ', err);
-    showToast('Не вдалося вставити текст з буфера обміну.', 'error');
+    showToast(texts[currentLang].toastError, 'error');
   }
 });
 
 // Обробляємо натискання кнопки "Очистити поле"
 clearButton.addEventListener('click', () => {
   gitDiffInput.value = '';
   updatePrompt();
+  localStorage.removeItem('gitDiff');
 });
 
 // Обробляємо натискання кнопок "Копіювати" для команд git
@@ -111,14 +227,31 @@ copyCommandButtons.forEach(button => {
     const command = button.getAttribute('data-command');
     try {
       await navigator.clipboard.writeText(command);
-      showToast(`Команда "${command}" скопійована в буфер обміну!`, 'success');
+      showToast(`${texts[currentLang].toastCommandCopied}`, 'success');
     } catch (err) {
       console.error('Не вдалося скопіювати команду: ', err);
-      showToast('Не вдалося скопіювати команду.', 'error');
+      showToast(texts[currentLang].toastError, 'error');
     }
   });
 });
 
+// Тема (темна/світла)
+function setTheme(isDark) {
+  document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+  themeToggle.checked = isDark;
+  themeLabel.textContent = isDark ? texts[currentLang].themeLabelDark : texts[currentLang].themeLabelLight;
+  localStorage.setItem('theme', isDark ? 'dark' : 'light');
+}
+
+// Ініціалізація теми при завантаженні сторінки
+const savedTheme = localStorage.getItem('theme') || 'dark';
+setTheme(savedTheme === 'dark');
+
+// Обробляємо зміну теми
+themeToggle.addEventListener('change', () => {
+  setTheme(themeToggle.checked);
+});
+
 // Функція для показу сповіщення (toast) на екрані
 function showToast(message, type = 'success') {
   toast.className = 'toast';
@@ -138,4 +271,4 @@ function showToast(message, type = 'success') {
     toast.classList.remove('show');
     toast.classList.add('hide');
   }, 3500);
-}
+}