Розглянемо два ключові компоненти: роботу з чат-ботами та роботу в IDE (інтегрованому середовищі розробки). [[Починаємо]]Будемо використовувати ШІ пошуковик та чат-систему роботи з кодом <a href="https://www.phind.com/" target="_blank">Phind</a> <-- зайдіть на сайт. (text-colour:grey)[Великі моделі (тут безкоштовно доступ до Phind-34B) можуть працювати з запитами на будь-якій мові та розуміти запити з граматичними помилками.] &nbsp; ⛏️ Спробуйте однаковий (text-colour:yellow)[запит] у режимі пошуку (Search) та у режимі чат (Chat). // У чому різниця?// Щоб очистити чат, натисніть на слово "Chat" ще раз. --- далі: [[Поясненя коду]](text-colour:grey)[Якщо ми хочемо отримувати відповіді від чату у //специфічному// форматі, швидше за все знадобиться fine-tuning. ] Але більшість сучасних моделей легко виводять відповідь у вигляді'' списків та таблиць''. Часто вивід у форматах JSON та CSV теж працює добре. ⛏️ Змінить формат виводу phind у режимі чат (Chat), додавши до запиту у кінці (text-colour:magenta)["Виведи результат у вигляді таблиці"] &nbsp; // Зверніть увагу, що також можете через запит змінювати стовпці. Іноді результат все одно буде виведений не у вигляді таблиці, тоді треба продовжити чат і ще раз надіслати фразу, що задає формат виводу.// --- далі: [[Що робити з відповідями]]Ми можемо продовжувати чат, уточнюючи інструкції доти, доки відповідь нас не влаштує. Якщо треба, її можна (text-colour:orange)[скопіювати] виділивши мишкою. <img height="300" src="media/copyButtons.png" alt="Різні кнопки Спокіювати"> Також знизу повідомлення є кнопка "скопіювати". //Зазвичай код виводиться в ''окремому'' блоці, то варто звернути увагу, що в такого блоку є своя кнопка "скопіювати" до буферу обміну.// --- далі [[Генеруємо дані]]Ми можемо генерувати зразки даних у JSON як (text-colour:magenta)["У форматі JSON: три відгуки на товар"] чи (text-colour:magenta)["Порівняння відомих мов программуваня у форматі JSON"] ⛏️ Спробуйте різні варіанти. <div style="margin-left: 30px;"> У розмові з моделью можно модефікувати дані за допомогою уточнень "Видали ... з ... " та "Зміни ... на ... ". //Якщо для початку створення коду вам потрібні дані інших форматів, наприклад (text-colour:purple)[CSV чи XML], ви також можете їх згенерувати.// </div> (text-colour:grey)[Якщо модель Phind-34B раз за разом помиляється (наприклад ключі об'єкту не англомовні), то перейдіть на Phind-70B де кожного дня є 10 безкоштовних запитів.] --- далі: [[Перегенерування]]Якщо (bg:red)[нам не підходить відповідь], то є принаймні три способи, що з цим робити. --- Залежить від серйозності помилок: 1 - коли все погано - ''очистити чат'' і почати з чистого контекстного вікна. 2 - ''відредагувати'' свій ''останній'' ''запит'' (є посилання під ним "Edit Question"). 3 - ''перегенерувати'' останню ''відповідь'' моделі, для цього є спеціальна кнопка у вигляді 🔁. <img width="100%" src="media/rewrite.png" alt="Різні кнопки Перегенерувати"> //(text-colour:grey)[Розуміння який саме спосіб кращий у даній ситуації зазвичай приходить з досвідом роботи з конкретною моделлю.]// --- [[ШІ генерує - я контролю]]Часто при ознайомленні з новим кодом (або зі своїм старим кодом🙂) після швидкого перегляду виділяються фрагменти, які не так легко зрозуміти. Їх можна скопіювати і закинути в модель з проханням ''пояснити'' через запит (text-colour:magenta)["Поясни стисло як працює цей шматок коду"] (приклад <a href="https://platform.openai.com/examples/default-explain-code" target="_blank">з докуменатції ChatGPT</a>) <div style="margin-left: 30px;"> //Якщо додати контекст у вигляді мови програмування, фреймворку і в загальному частиною чого є цей код, то точність відповіді зросте.// Наприклад, (text-colour:magenta)["Поясни як працює цей node.js код парсера оцінок товарів"] </div> ⛏️ Знайдіть у себе на комп'ютері або на <a href="https://github.com" target="_blank">GitHub</a> будь-який проект - відкрийте один з файлів, виберіть звідти шматок коду і попросіть модель його пояснити. --- далі: [[Перенесення логіки]]Якщо ми хочемо вивчити якісь код (алгоритм), але не дуже добре розбираємося у тій мові програмування, на якій він написаний? Модель можна попросити переписати цей код з однієї мови програмування на іншу, а також на <a href="https://uk.wikipedia.org/wiki/Unified_Modeling_Language" target="_blank" title="Wikipedia">UML</a>. <div style="margin-left: 30px;"> Наприклад, (text-colour:magenta)["Переклади цей node.js код на Python"] //Прмітка: HTML не є мовую пограмуваня, це розмітка тексту тому є такі варіанти: (а) скопіювати javascript який є у початковому коду сторінці та його перекласти. (б) переводити у інший формат розмітки тексту як то JSON.// Наприклад, (text-colour:magenta)["Виведи цей HTML код як JSON"] </div> ⛏️ Знайдіть на <a href="https://github.com" target="_blank">GitHub</a> будь-який проект на маловідомій вам мові программуваня (у пошуку використовуйте фільтри розділу Languages) - відкрийте один з файлів, виберіть звідти шматок коду і попросіть модель його перекласти. --- далі [[Зміна формату виводу]]Якщо щось не працює, головне знайти, де виводиться ''повідомлення про помилку'' (термінал для коду чи консоль розробника в браузері, хоткей F12) Формулювання помилки можна скопіювати і закинути в модель з проханням ''пояснити'' через запит (text-colour:magenta)["Як мені виправити цю помилку"] ⛏️ Якщо щось не працює, копіюйте формулювання помилки в чат і дивіться, які виправлення пропонуються. Робіть їх. Так крок за кроком прийти до працюючої версії. &nbsp; //В цілом непрацуючий код можна теж віддавати моделі як (text-colour:magenta)["Буде наданий шматок коду - знайди та виправи помилки в ньому"] (приклад <a href="https://platform.openai.com/examples/default-fix-python-bugs" target="_blank">з докуменатції ChatGPT</a>)// --- далі: [[Версії бібліотек]] Генерувати код окремими частинами - мати підзадачі Provide ideas for efficiency improvements to Python code. https://platform.openai.com/examples/default-code-improvement --- [[Cursor app]] ⛏️ Сегеруйте у Cursor просту веб сторінку за допомогою запиту (text-colour:magenta)["HTML сторінка з вбудованим javascript та CSS. По центру кнопка, яка змінує рандомно колір фону сторінки"] - (адаптація прикладу <a href="https://platform.openai.com/examples/default-single-page-website" target="_blank">з докуменатції ChatGPT</a>) Збережіть (Ctrl+S) як "colors.html" та відкрийте у браузері. &nbsp; (text-colour:grey)[При використанні GPT-3.5 ймовірність отримати поламаний код набагато вища, ніж при використанні GPT-4.] --- далі: [[Пошук помилок]] Оскільки будь-яка LLM все одно буде помилятися, то головне правило: (text-colour:cyan)[Генерувати код, який я сам знаю як написати!] --- Генератор коду не заміна вивченю мови, документації, проходженю курсів та консультуваню з більш досвідченими програмістами. Працюємо з ШІ у парі (концепція Pair Programmer): LLM створює код. Я даю завдання, допомагаю з усуненням ''помилок'', генеруванням ідей та вирішенням проблем --- далі: [[Маленькі завдання]]Привіт. Мені дуже потрібна твоя допомога у програмуванні на {мова}. Я хочу написати на {фрейморк} {що} [[Наміри]] - мова, фрейморки, API - інший мій код Наміри = Ясність та Детальність у редакторі на початку коду та кожної функції писати коментарі поясненя - що цей код повинен робити - код-приклад з документаціНайчастіше моделі видають поломаний код,(text-colour:red)[ коли використовують у ньому бібліотеки або сторонні модулі] - підключають або не ті версії, або використовують функції, які застаріли, або змішують кілька бібліотек. Що з цим можна роботи? - RAG документації, наприклад на сайті <a href="https://codeium.com/live/next-js" target="_blank">codeium.com</a> - Включення документації у конткст запиту - у Cursor вже є деякі й можна додати свої через символ "@" у чаті. - модель Phind зазвичай доповнює відповід пошуком на кодінг сайтах --- далі: встановити [[phind розширення]] В залежності від важливости коду: 1. якщо потрібен тільки на ''разову'' дії (наприклад, швидко запарсерити якісь сайт), то у нас мінімальні до нього вимоги - генеруємо "брудно" й перевіряємо результати. 2. якщо потрібен тільки на ''разову'' дії, але для ''іншої'' людини - вже перевіряємо що там сгенеровано --- 3. якщо тільки для мене, але на ''постіне'' використаня - переписую сгенероване. 4. якщо на ''постіну'' основу для ''інших'' людей, то краще використовувати методологією Clean code ("Чистий код" <a href="https://uk.wikipedia.org/wiki/%D0%A0%D0%BE%D0%B1%D0%B5%D1%80%D1%82_%D0%9C%D0%B0%D1%80%D1%82%D1%96%D0%BD" target="_blank" title="Wikipedia">Роберт Сесіл Мартін</a>) чи SOLID, щоб код був максимально "підтримуваним". Також стане у нагоді запит (text-colour:magenta)["Виведи рекомендації щодо покращення коду за методологією Clean code"] --- далі: [[Cursor app]] Аналізатори, коли логіка задана: створення запитів до БД створення RegEx створення тестів створення документації пошук небезпечних підходів Будемо використовувати ШІ редактор коду <a href="https://www.cursor.sh/" target="_blank">Сursor</a> <-- зайдіть на сайт, завантажте та встановіть на свій компьютер, активуйте через пошту. <div style="margin-left: 30px;"> У безкоштовному плані: - 50 використань повільного GPT-4 - 200 використань GPT-3.5 на місяць </div> Розмовляти з код асистентом можна не тільки у панелі чат (CHAT), а й у будь якій частині коду за допомогю поп-ап вікна (через Ctrl+K) - також зверніть увагу, що модель можна змінювати. <img width="100%" src="media/cursor_models.png" alt="Різні моделі"> --- далі: [[Створюємо веб-сторінку]] ⛏️ Через marketplace встановити у Cursor phind розширення (text-colour:lime)["Phind.com - Chat with your Codebase]" та активувати. <img width="100%" src="media/phind_ext.png" alt="Різні кнопки Перегенерувати"> Базова модель на 34B (тюнінгована code-llama) безкоштовна. Окрім того чат має хоткеї та додаткові можливості, наприклад "вставити сгенерований код де курсор" та "застосувати зміни" --- далі: [[Дякую]]При роботі з LLM асистентами дуже важливо ставити їм (text-colour:yellow)[конкретні, деталізовані завдання та розбивати великі задачі на менші] частини. Краще ''розділити проект'' на окремі модулі за функціоналом, а потім кожен модуль розділити на невеликі функції. І потім ставити асистенту конкретне завдання реалізувати певну функцію. ⛏️ Подумайте (а краще намалюйте схему) про систему, у функціонуванні якої ви розбираєтесь (наприклад, чат-інтерфейс) - з яких модулів вона складається, що в них відбувається. За яким ''принципом'' ви розбили їх саме так? //(text-colour:grey)[Зрозумілий запит дає змогу моделі, зосередитися на реалізації однієї невеликої задачі та написати якісніший код. А поступово поєднуючи готові функції, можна буде зібрати повноцінний проект.]// --- далі: [[Код гарний по-різному]] Дякуємо за участь у практикумі з використання ШІ для написання коду! Це тільки перші кроки - попереду ще багато цікавого.