Korak po korak kako da Kimi napravi animaciju mape kretanja, sada svako može da iskusi šarm Agent programiranja.
Video sam da je prijatelj Xuanyuan napravio veoma zanimljiv sajt, koristi Gemini za SVG animacije, posebno animirane mape celog života istorijskih ličnosti, koje dinamički prikazuju koje je mesta posetio i kroz šta je prošao.
Moja prva pomisao nakon što sam video je, može li Kimi da napravi kopiju.
Nakon sat vremena pokušaja, otkrio sam da je rezultat zaista prevazišao moja očekivanja.
Prvo da vam pokažem konačni rezultat.
[Ovde ubaciti kompletan snimak ekrana animacije mape kretanja Džu Juančanga: ključne informacije: prikaz kompletne animacije, uključujući mapu, crtanje putanje, obeležavanje čvorova, kontrolu vremenske ose, dugme za puštanje]
Na mapi su obeležene ključne tačke u životu Džu Juančanga, kliknite play i možete videti kako se putanja njegovog života polako razvijaju na mapi kao animacija, od rođenja u Fengyangu u provinciji Anhui, preko ulaska u manastir kao monah, pridruživanja Crvenim turbanima, do osnivanja dinastije Ming — ceo proces je jasan iz jednog poteza.
Nije li to super?
Još je bolje to što za ovaj projekat nisam napisao nijedan red koda, sve sam završio kroz razgovor sa Kimi.
01. Kimi Ok Computer
Da vam objasnim karakteristike Kimi Ok Computer.
To je Agent koga je Kimi sam razvio, ne zavisi od inostranih modela kao što je Gemini. I postigao je "trojstvo" sposobnosti.
Sposobnost izgradnje celog stack-a na nivou Manus-a, što znači da može od frontenda do backenda kompletno izgraditi projekat; sposobnost generisanja slika na nivou Midjourney-a, koja nam pomaže u generisanju ikona, pozadina, naslovnica i drugih vizuelnih materijala; sposobnost duboke pretrage na nivou Perplexity-a, koja nam pomaže u pronalaženju materijala i sređivanju podataka.
Ono što me je najviše iznenadilo je to što njegov kod gotovo da nema "AI ukus".
Komunikacija sa njim više liči na saradnju sa inženjerom koji razume tehnologiju, razume estetiku i razume kineski kontekst.
U poređenju sa tradicionalnim razvojem, poboljšanje efikasnosti je vidljivo. Ranije bi ovakav projekat, od frontenda do integracije mape, od implementacije animacije do deployment-a, zahtevao bar nedelju dana. Sada sa Kimi Ok Computer, može da se završi za sat vremena, a i estetika je na nivou.
02. Sprovođenje jedne ideje
Dobro, hajde da počnemo.
Otvorio sam Kimi Ok Computer i u prvoj rečenici rekao: "Želim da napravim mapu celog života Džu Juančanga, koja dinamički prikazuje njegov put od prosjaka do cara."
Kimi zvanični sajt: https://www.kimi.com
Zatim priprema podataka. Ovde moram da pohvalim Kimi-jevu sposobnost duboke pretrage, on mi je direktno pretražio biografske podatke Džu Juančanga, a zatim ih automatski sredio u JSON format, uključujući godinu, mesto, geografsku dužinu i širinu, opis događaja za svaki čvor.
Podaci su prilično detaljni, uključujući vreme i starost, geografsku lokaciju, opis događaja. Da bih osigurao tačnost, ručno sam ih proverio. Konačno sam sredio 6 ključnih čvorova:
- godine, rođen u siromašnoj seljačkoj porodici u Fengyangu u provinciji Anhui. 1353. zauzima Chuzhou. 1356. zauzima Jićing (današnji Nanjing), uspostavlja bazu. 1363. sukobljava se sa Chen Youliangom u bici na jezeru Poyang. 1367. pobeđuje Zhang Shichenga; 1368. osniva dinastiju Ming, severna kampanja zauzima Peking, dinastija Yuan pada.
Svaki čvor ima odgovarajuće koordinate, opis događaja itd., format podataka je JSON, zgodan za direktno čitanje i korišćenje.
Zatim je obeležio listu zadataka, priprema za inicijalizaciju projekta, razvoj komponenti mape i animacionih efekata, vremenske ose i vremenskih detalja, kao i izgradnju i deployment sajta.
Iako Kimi koristimo u browseru, on simulira Linux terminal, odnosno sandbox okruženje, tako da napravljeni sajt nije samo demo, jer ima stvarno production-level okruženje.
I Kimi je veoma pažljivo za svaki čvor generisao scenske slike, sa veoma starinskim karakteristikama.
Iskreno, u fazi razvoja sam i dalje bio malo napet, jer integracija mape, implementacija animacije i drugi tehnički aspekti, nikada ranije nisam imao dodira sa njima. Ali Kimi-jeva izvedba je potpuno otklonila moje brige.
Inicijalizovao je React, konfigurisao razvojno okruženje, a zatim počeo da piše kod. I konačni kod se može zapakovati i preuzeti lokalno.
Nije to mehanički šablonski kod, već inženjerski kod sa logikom i arhitekturom. Imenovanje promenljivih je pravilno, komentari jasni, tamo gde treba razdvojiti komponente, razdvaja komponente, gde treba izdvojiti logiku, izdvaja logiku.
Mapa je direktno integrisala Baidu Maps, nakon što sam pogledao API, bacio sam API key na Kimi i on je sam povezao map API.
Putanja se postepeno prikazuje kako vreme napreduje, linija polazi od početne tačke i polako se crta duž redosleda čvorova, kao da neko crta liniju po mapi.
Obeležavanje čvorova je veoma pažljivo. Svaki čvor je u stilu starinskog pečata, sa obeleženim važnim istorijskim događajima. Klik na čvor otvara karticu sa detaljima, koja sadrži detaljan opis i istorijske slike.
Sa desne strane stranice je vremenska osa, korisnik može prevlačiti klizač da pregleda različite periode, a takođe može kliknuti dugme za puštanje da bi animacija automatski krenula. Kimi je implementirao veoma glatko, prilikom prevlačenja vremenske ose, putanja na mapi se sinhronizovano ažurira na odgovarajući period, a čvorovi se pojavljuju jedan po jedan.
Ono što me je najviše iznenadilo je to što je Kimi, nakon pisanja koda, sam testirao i pokrenuo sandbox okruženje, a ako bi došlo do greške, sam bi je ispravio, sve dok ne uspe.
Šta je tačno izmenio u kodu, kliknite na tab [Diff] i sve će biti jasno.
03. Deployment
Nakon završetka razvoja, sledi deployment.
Kimi izvršava komandu za pakovanje, generiše production fajlove, ceo proces deployment-a je potpuno automatizovan. Nakon nekoliko minuta, dobio sam link.
https://v6i3b3cqwiwyo.ok.kimi.link
Kada otvorite link, kompletna mapa kretanja Džu Juančanga se pojavljuje pred očima. Na mapi, zlatna putanja polazi iz Fengyanga u provinciji Anhui, vijuga do Nanjinga, a čvorovi su obeleženi jedan po jedan.
Kliknite dugme za puštanje, putanja polako počinje da se crta, čvorovi se pojavljuju jedan za drugim, vremenska osa napreduje sinhronizovano, ceo proces je kao gledanje istorijskog dokumentarca.
Specijalno sam testirao i na mobilnom, i tamo je potpuno dostupan. Čak je izbegao i vreme registracije domena, neverovatno, Kimi je zaista svepredvideo.
Ovim je od ideje do deployment-a projekat završen.
04. Generisanje starinskog dizajna pomoću Image Code
Kada su zahtevi jasni, sledi faza dizajna. Iskreno, ne znam ništa o starinskom dizajnu, obično radim frontend projekte u modernom minimalističkom stilu, odjednom treba da radim starinski, zaista ne znam odakle da počnem.
Tu funkcija Image Code dolazi do izražaja.
Prvo sam zamolio Kimi da mi pretraži neke primere starinskih sajtova i vizualizacija istorijskih mapa, da vidim kako drugi to rade. Kimi je brzo pronašao nekoliko referenci, uključujući sajt Palata muzeja, projekte vizualizacije istorijskih mapa, i konceptne crteže starinskih igara.
[Ovde ubaciti screenshot referentnog sajta/stare mape: ključne informacije: prikazati 3-5 referentnih slika, uključujući starinske sajtove i stare mape]
Iz ovih referenci, otkrio sam da starinski dizajn ima nekoliko karakteristika: u bojama voli da koristi boje sa istorijskim osećajem kao što su braon, boja mastila, zlatna; u teksturama voli da koristi rižin papir, stare mape i druge podloge sa teksturom; u elementima voli da korisi pečate, kaligrafske fontove, tradicionalne šare.
Sada sledi najvažniji Image Code korak. Odabrao sam staru mapu kao referentnu sliku, direktno je poslao Kimiju, a zatim rekao: "Prema stilu ove stare mape, pomozi mi da dizajniram interfejs mape kretanja, sa starinskim osećajem, boje treba da su smirene i dostojanstvene, ikone čvorova neka budu zastavice ili pečati u starinskom stilu."
[Ovde ubaciti screenshot referentne slike koja je poslata Kimiju: ključne informacije: prikazati referentnu sliku stare mape]
Dogodilo se nešto čudesno. Kimi nije samo razumeo "starinski stil" koji sam pomenuo, on je zaista preko Image Code razumeo estetiku te stare mape, a zatim generisao kompletan UI dizajn.
[Ovde ubaciti Kimi generisan UI dizajn (Mockup): ključne informacije: prikazati konačan starinski dizajn interfejsa, uključujući boje, raspored, elemente]
Predložio je da se kao pozadinska boja koristi tamno braon, da simulira teksturu stare mape; zlatna za linije putanje, koja je i uočljiva i ima carski prestiž; ikone čvorova u stilu crvenog pečata, sa godinom označenom; naslov u kaligrafskom fontu, telo u čistom, čitljivom Song fontu; pozadina može imati sloj blage teksture rižinog papira.
U isto vreme, iskoristio je i funkciju generisanja slika da mi generiše starinske ikone čvorova i teksture pozadine. Zastavica, pečat, tekstura rižinog papira — sve mi je generisao, i stil je bio ujednačen, sa puno starinskog ukusa.
[Ovde ubaciti screenshot Kimi generisanih starinskih elemenata: ključne informacije: prikazati ikone čvorova (zastavice, pečati), teksture pozadine i druge materijale]
Tokom celog procesa, osećao sam se kao da sa dizajnerom razgovaram o zahtevima, a ne kao da koristim AI alat.
05. Demokratizacija tehnologije
Gledajući unazad na ceo proces, imam nekoliko veoma jakih utisaka.
Prvo, tehnički prag je zaista spušten na minimum. Ranije za ovakav projekat, morali ste da savladate HTML, CSS, JavaScript, morali ste da poznajete frontend okvire kao React ili Vue, morali ste da razumete Baidu Maps ili Gaode Maps API, morali ste da koristite biblioteke animacija kao Anime.js ili GSAP. Sada, samo treba da umete da pričate, da opisete svoju ideju.
Drugo, poboljšanje efikasnosti razvoja je reda veličine. Tradicionalni razvoj najmanje nedelju dana, sada sat vremena.
To nije preterivanje, već stvarno iskustvo. Kimi ne samo da piše kod, već pokriva ceo proces od analize zahteva do dizajna, od razvoja do deployment-a.
Treće, kvalitet estetike je zagarantovan. Frontend projekti koje sam sam radio, estetika je uvek bila slaba tačka, boje, dizajn rasporeda, animacioni efekti, sve to zahteva dugogodišnje iskustvo.
Ali Kimi, kroz Image Code i funkcije generisanja slika, direktno nadoknađuje ovaj nedostatak.
Četvrto, i najvažnije, pogodnost koju donosi čisto domaće samostalno rešenje. Claude zahteva API i zavisi od inostranih usluga; Cursor zahteva konfiguraciju okruženja, a za ne-programere je trošak učenja izuzetno visok.
A Kimi ok computer je čist web pregledač, otvorite i koristite.
Vrednost ove "demokratizacije tehnologije" je naročito očigledna u stvarnim scenarijima.
Nastavnici istorije mogu koristiti za izradu nastavnih materijala, da nastava bude življa; muzeji mogu praviti istorijske izložbe, da posetioci imaju imerzivno iskustvo; učenici mogu koristiti za završavanje domaćih zadataka iz istorije, umesto da bubljaju godine; kreatori sadržaja mogu praviti istorijski sadržaj, da članci budu privlačniji.
Imati ideju i moći je ostvariti, to je prava demokratizacija tehnologije.
06. ending
Ako moram jednom rečenicom da sažmem glavnu prednost Kimi Ok Computer-a, onda je to: čini da "imati ideju i ostvariti je" zaista postane stvarnost.
Ranije, da bi se ideja sprovela, bila je potrebna tehnologija, vreme, iskustvo. Sada, sa Kimi Ok Computer, dovoljno je da imate ideju. On će popuniti tehničke praznine, uštedeti vreme razvoja, pružiti stručne savete, i omogućiti kreativnim idejama da brzo postanu proizvodi.
Mapa kretanja Džu Juančanga je tek početak, istom metodom možete napraviti i mape kretanja Lju Beja, Cao Caoa i drugih istorijskih ličnosti, mape odnosa likova iz "Sna u crvenoj dvorani", mape bitki Tri kraljevstva, vizualizaciju Puta svile. Dokle god imate ideju, Kimi Ok Computer može da vam pomogne da je ostvarite.
Oni koji još nisu iskusili, mogu brzo da posete zvanični sajt Kimi i isprobaju funkciju Ok Computer. Verujte mi, otvorićete vrata novog sveta.
https://www.kimi.com/ok-computer
Neka vaše ideje postanu stvarnost, OK?!