Що ж, мій проект “Сузір’я” мене захопив. Я попросив ШІ написати запит на реалізацію нашого проекту, щоб я написав його в іншому чаті. Я давно вже на досвіді побачив що не варто змішувати обговорення коду з іншими чатами, тому що обговорення коду це пласти коду запропонованого ШІ серед яких потім важко щось знайти. Тому давно я вже практикую такий підхід – для кожного направлення і теми у мене свій чат з ШІ.
Я скинув ШІ, в новому чаті, картинку vision, тобто як це все повинно виглядати. І текстовий запит, який один Gemini писав іншому Gemini.
Ось який запит було написано:
У мене є сайт https://learn-to-control-yourself.com в якому є цитати відомих людей розділенні по різним категоріям (надія, щастя, про життя і.т.д.) а також мої пости теж розділенні по різним категоріям (шлях до внутрішньої перемоги, блог про мою контрактну службу, блок про мое навчання JS). Я хочу створити свій проект “Сузір’я”
“Мені потрібно розробити інтерактивну мапу знань на JavaScript (Canvas) у стилі ‘Космічного Сузір’я’.
Архітектура даних:
Статті (Вузли): Великі зірки. Мають властивості: title, cluster (Warrior, Master, Seeker), importance (розмір).
Цитати (Частинки): Два типи:
‘Background Dust’: дрейфують групами навколо центрів кластерів.
‘Satellites’: обертаються навколо конкретних статей.
Технічні вимоги:
Physics Engine: Використати Force-directed layout. Статті повинні притягуватися до центрів своїх кластерів і відштовхуватися одна від одної.
Performance: Оскільки цитат багато (зоряний пил), малювати їх як легкі пікселі/частинки, щоб не перевантажувати процесор.
Інтерактивність: > – Плавний Zoom та Pan (перетягування карти).
При наведенні на статтю — підсвічування її назви та зв’язків.
При кліку — window.open(url).
Візуал: Чорний фон, неонові кольори кластерів (Помаранчевий, Блакитний, Фіолетовий). Ефект світіння (glow) для великих зірок.”
Ось якою вийшла реалізація.
Якою б куцою не була б ця реалізація, але я був натхненний, натхненний тим що воно взагалі вивело хоч якусь структуру, що пости вивелись, вивелись в загально необхідну мені структуру.
Після виведення цієї початкової структури я вирішив разом з ШІ пройтись по кожному рядку коду. У мене було бажання розібратись в кожному рядочку, що він робить і.т.д. В ідеалі я хотів через це осягнути принципи роботи і побудови, і таким чином пройти процес навчання. Але в реальності вже на початку я зрозумів що якщо я реально хочу вникнути в цей процес то мені потрібно набагато глибше вивчати всі ці інструменти і.т.д. Тому я обмежився тим що пробіжав очима всі пояснення ШІ, отримавши дуже поверхневе і загальне розуміння процесу. Можливо це було не правильне рішення і я просто полінувався. Через це я також зрозумів що у таких от “своїх проектів” є деякі мінуси. Якщо на навчальних курсах викладач розглядаючи створення “слайдера” або “калькулятора”, в цьому процесі доносить загальні і базові розуміння. Тобто він, можна сказати, будує будинок починаючи із закладки фундамента. То от коли ти робиш який свій проект то ти вже працюєш не з загальними концепціями, а з якимось вузьким інструментом або бібліотекою. Тобто, можна сказати, що ти не будуєш фундамент будинку, а одразу переходиш до встановлення кондиціонеру, ще не побудувавши фундамент і стіни.
Натхнення від виведенної структури тривало не довго, тому що після першої волни радісних емоція прийшло тверезе розуміння що на даному етапі реалізація ще не повністю схожа на кінцеве бачення:) Хоча ШІ безсоромно і прям мені в очі стверджував що ми все круто зробили і казав які ж гарні у нас вийшли зірки. У мене звичайно це викликало певне непорозуміння. Я ще раз впевнився в тому що далеко не завжди ось так можна скинути ТЗ і картинку того як воно повинно виглядати і він все зрозуміє і зробить. Тобто я сам повинен був вирішувати як саме ми будемо доводити наш проект до необхідного ідеалу. У мене в руках був інструмент, технічно добре підкований, але загально не дуже розумний, я би навіть сказав – трохи відморожений.
Я вирішив почати з базових моментів, зі створення необхідної структури. Ми почали наближати наші сузір’я ближче до центру, намагаючись зробити хоч трохи схоже на те що було намальовано на vision. Це почало викликати свої проблеми з фізикою частинок.
Більш менш наблизивши сузір’я до центру, я вирішив зайнятись виглядом зірок. Нажаль ШІ вперто не хотів погодитись з тим що ось ці кружечки не дуже схожі на зірки. Взагалі, мене почало кидати із сторони в сторону, я то займався структурою то займався виглядом зірок. Проблема була в тому що у мене було бачення як все повинно бути – гарненька картинка vision, і реальність три виноградні грозді кружечків різного кольору. І важко було зрозуміти – що ж саме робить цей “витвір мистецтва” таким далеким від ідеалу. Питати це в ШІ не було сенсу, він постійно твердив яка крута галактично-космічна карта у нас вийшла:).
Нарешті я зміг донести ШІ що ці кружечки не дуже схожі на зірки і він видав ось такий шедевр:
По перше це було схоже на якісь хрести, а не зірки, по друге загальна картинка стала якоюсь не яскравою. Я написав про це ШІ, і він з дитячою безпосередністю сказав що “точно, і дійсно вийшли якісь хрести”. Тому він видав наступний варіант “без хрестів” і більш яскравий.
Побачивши цей варіант я задумався, а чи точно ШІ розуміє що таке хрест, а що таке зірка, і чи точно він зміг розгледіти які ж там зірки на vision. Я вже почав трохи не контролювати емоції і ще раз попросив його прибрати хрести. В кінці кінців ми знову повернулись до кружечків:)
Я вирішив зменшити кружечки до маленьких цяточок, як би там не було але навіть ці цяточки були більше схожі на зірки, ніж кружечки або хрестики:). Втомившись від цього муторного процесу пошуку вигляду зірок, я вирішив зайнятися іншим питанням. А саме проблемою розміщення зірок. По-перше вони були занадто близько одна до одної, по-друге вони відображалися у формі виноградних гроздей. Це був також довгий і муторний процес. Зірки то розлітались по всьому екрану, то скупчувалися в грозді, то взагалі всі три сузір’я зліплялись в один ком.
Нарешті мені вдалося розвести зірки на більшу відстань. Але з розведенням сузір’їв в три різні боки була проблема. Сузір’я воїна мало в декілька разів більшу кількість зірок (статей) тому воно просто притягувало до себе інших. І тут мені прийшла геніальна ідея – зменшити вагу зірок саме сузір’я воїна щоб воно не так багато важило. І ось, еврика! Нам вдалося розвести сузір’я в три сторони. Після цього я вирішив вже закінчити і залишити як є. Було три сузір’я, вже в гарній структурі, але все виглядало дуже пасмурно і не яскраво. І ось на наступний день мені прийшло осяяння. Я загадав як мені подобається ефект блиску золота на чорному фоні, або чогось більш яскравого. Тобто ось цей сонячно-золотий блиск дуже гарно виглядає на темному або чорному фоні. І ось я написав для ШІ ось такий запрос:
“так друже, тепер у нас наступна важлива задача. Я вчора думав – що не так із зовнішнім виглядом зірок, і зрозумів що треба виправити. Нам не треба робити світіння і колір зірок кожного сузір’я різним. всі зірки повинні бути однакові, а саме – щось між сонячним світлом і золотом. Тобто колір зірок повинен бути як сонячне світло або золото. Ключовий момент підбери такий варіант щоб вони були максимально яскравими, не за рахунок збільшення їх розміру, а за рахунок яскравості. Уяви кімнату в якій повна темрява і в стіні є дірка з якої світить яскраве жовте (як сонячне або золоте) світло і от хтось закрив товстим чорним листком цей отвір і зробив в цьому папері голкою багато маленьких дірок, і от через ці маленькі дірки світить яскраве світло, ось ці дірки це і є зірки. Зроби такий ефект, якщо потрібно використовуй css, якщо потрібно то js, головне результат і щоб це все не навантажувало систему”
І нарешті, вдалося!
Так, це все ще були маленькі цяточки. Але! всередині них вже був потрібний мені ефект – приємного і яскравого світіння. Залишилось тільки збільшити їх і придати нормальну форму (доречі формою я обрав саме логотип Gemini, щоб йому було легше зрозуміти). І ось я побачив саме такі зірки як хотів. Це вже було гарно. Потім залишилось тільки додати гарний зоряний пил. І ось фінальний варіант мені вже дійсно подобався.
Ну що ж, я був щасливий:) Було дійсно приємно роздивлятись шедевр який ми створили. Особлива радість приходила на основі всіх вимучених страждань:).
Поділитися в соц мережах
