Spletni programer z umetno inteligenco: kako umetna inteligenca transformira razvoj
Umetna inteligenca ne bo zamenjala spletnega programerja. Vendar pa bo spletni programer, ki uporablja AI, zamenjal tistega, ki je ne uporablja.
Leta 2026 je generativna AI radikalno transformirala način, kako razvijamo spletne aplikacije. Od asistentov za kodo do popolnih aplikacij z inteligentnimi zmogljivostmi je AI že sveprisotna.
V tem članku bom raziskal, kako AI spreminja vlogo spletnega programerja, katere nove veščine zahteva, primere iz resničnega sveta, ki jih že implementiram, in kam se usmerjamo.
AI kot soavtor razvoja
Prva posledica: AI kot asistent za programiranje.
GitHub Copilot in alternative
Kako funkcionirajo:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Napišeš komentar ali podpis funkcije</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-comment"</span>></span>// function calculateShippingCost(<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-comment"</span>></span>// In Copilot predlaga popolno implementacijo:<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>calculateShippingCost<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>weight<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-built_in"</span>></span>number<span class="hljs-tag"></<span class="hljs-name">span</span>></span>,
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>destination<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-built_in"</span>></span>string<span class="hljs-tag"></<span class="hljs-name">span</span>></span>,
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>shippingMethod<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>standard<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> | <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>express<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span> | <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>overnight<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>): <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-built_in"</span>></span>number<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> baseRate = shippingMethod === <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>standard<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> ? <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>5<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
: shippingMethod === <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>express<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> ? <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>12<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>25<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> weightRate = weight * <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>0.5<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> destinationMultiplier =
destination === <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>national<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> ? <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
: destination === <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>europe<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> ? <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>1.5<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>2.5<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>return<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> (baseRate + weightRate) * destinationMultiplier
}
Vpliv na produktivnost:
Glede na mojo izkušnjo z GitHub Copilotom:
- +30-40% hitrost pri kodi boilerplate
- +50% hitrost pri enotskih testih
- +25% hitrost pri pogostih funkcijah
Vendar: Zahteva kritičen pregled. Copilot predlaga, ti odločaš.
Trenutne alternative:
- GitHub Copilot: Najbolj zrel, perfektna integracija VSCode
- Amazon CodeWhisperer: Brezplačen za posamično uporabo
- Tabnine: Poudarek na zasebnosti
- Codeium: Alternativa odprtokodna
Moja dnevna uporaba:
- Boilerplate: sprejemam ~80% predlogov
- Poslovna logika: sprejemam ~30-40%
- Testi: sprejemam ~60-70%
- Dokumentacija: sprejemam ~50%
Prihranjena časa: ~15-20 ur/teden
ChatGPT in Claude kot tehnični svetovalci
Več kot samo avtomatski dokončevanje, LLMs kot svetovalci:
Primeri dnevne uporabe:
Kompleksno odpravljanje napak
- Prilepim napako + kontekst
- LLM predlaga verjetne vzroke
- Prihranim: 30min-2h na težko napako
Arhitektura in vzorci
- "Kako strukturirati sistem obvestil v realnem času?"
- Prejmem možnosti: WebSockets, SSE, polling
- S prednostmi/slabostmi vsake
Optimizacija kode
- Prilepim počasno funkcijo
- LLM predlaga izboljšave zmogljivosti
- Preveri s primerjalno analizo
Dokumentacija
- Ustvari JSDoc iz kode
- Napiši popolne README datoteke
- Ustvari vodniče za uporabnike
Pomembne omejitve:
⚠️ LLMs alucinirajo:
- Izmislijo API-je, ki ne obstajajo
- Napačno citirajajo dokumentacijo
- Mešajo različice knjižnic
Zlato pravilo: Vedno preverite predloge, še posebej v produkciji.
Moj delovni proces:
- Posvetuj se LLM za ideje/možnosti
- Preveri v uradni dokumentaciji
- Temeljito testiraj pred integracijo
Spletne aplikacije z AI zmogljivostmi
Druga posledica: AI znotraj aplikacij.
Inteligentni chatboti
Chatboti so se razvili iz togih skriptov v kontekstne asistente:
Prej (2020):
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Chatbot s stavkom if/else</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>procesarMensaje<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span>mensaje<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>if<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> (mensaje.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>includes<<span class="hljs-regexp">/span>(<span class="hljs-string">&#x27;horario&#x27;</</span>span>)) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>return<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>Abrimos de 9 a 18h<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
}
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">if</span><<span class="hljs-regexp">/span> (mensaje.<span class="hljs-title function_">includes</</span>span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>precio<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>)) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>return<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>Nuestros precios empiezan en 100€<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
}
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;No entiendo tu pregunta&#x27;</</span>span>
}
Sedaj (2026):
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Chatbot z GPT-4 in RAG</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>import<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> { <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>ChatOpenAI<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>chat_models&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>import<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> { loadQAChain } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>chains&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>async<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>procesarMensaje<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>mensaje<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-built_in"</span>></span>string<span class="hljs-tag"></<span class="hljs-name">span</span>></span>,
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>historial<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">span</span>></span>[]
<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> llm = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>new<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>ChatOpenAI<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>modelName<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>gpt-4<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>temperature<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>0.3<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
})
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Poiskaliver relevantne informacije v znanjski bazi</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> context = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> vectorStore.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>similaritySearch<<span class="hljs-regexp">/span>(mensaje, <span class="hljs-number">3</</span>span>)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Generiraj kontekstni odgovor</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> response = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> chain.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>call</span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>question<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: mensaje,
context,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>chat_history<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: historial
})
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span><<span class="hljs-regexp">/span> response.<span class="hljs-property">text</</span>span>
}
Razlika:
- Prej: Odgovori samo na točno programirana vprašanja
- Sedaj: Razume namero, konsultira znanje, naravno odgovori
Sem implementiral chatbote z AI za:
- Strežba 24/7: Rešitev 70-80% vprašanj
- Tehnična podpora: Iskanje v dokumentaciji
- Conversacijska prodaja: Priporočila proizvodov
- Vpeljevanje uporabnikov: Interaktivni vodnik
Stroški razvoja:
- Tradicionalni chatbot: 2-3 tedne, omejene funkcionalnosti
- Chatbot z AI: 1-2 tedna, veliko večje zmogljivosti
Sistemi RAG za znanje podjetja
RAG (Retrieval Augmented Generation) = LLM + tvoje zasebne informacije
Tipična arhitektura:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// 1. Indeksiranje poslovne dokumentacije</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>import<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> { <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>OpenAIEmbeddings<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>embeddings&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>import<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> { <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Chroma<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>vectorstores&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>async<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>indexarDocumentos<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>docs<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Document<span class="hljs-tag"></<span class="hljs-name">span</span>></span>[]<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> embeddings = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>new<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>OpenAIEmbeddings<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>()
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">const</span><<span class="hljs-regexp">/span> vectorStore = <span class="hljs-keyword">await</</span>span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Chroma<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>fromDocuments</span>(
docs,
embeddings,
{ <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>collectionName<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>empresa-docs<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> }
)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span></span> vectorStore
}
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// 2. Preveri s kontekstom</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>async<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>preguntarDocumentos<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>pregunta<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-built_in"</span>></span>string<span class="hljs-tag"></<span class="hljs-name">span</span>></span>,
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>vectorStore<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Chroma<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> llm = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>new<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>ChatOpenAI<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>({ <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>modelName<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>gpt-4<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> })
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Poiskaliver relevantne dokumente</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> docsRelevantes = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> vectorStore
.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>similaritySearch<<span class="hljs-regexp">/span>(pregunta, <span class="hljs-number">4</</span>span>)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// LLM odgovori na podlagi dejanskih dokumentov</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> chain = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>loadQAChain<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(llm)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">const</span><<span class="hljs-regexp">/span> response = <span class="hljs-keyword">await</</span>span> chain.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>call</span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>input_documents<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: docsRelevantes,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>question<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: pregunta
})
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span></span> {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>odgovor<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: response.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-property"</span>>text</span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>viri<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: docsRelevantes.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>map<<span class="hljs-regexp">/span>(<span class="hljs-function"><span class="hljs-params">d</</span>span> =&gt;<<span class="hljs-regexp">/span> d.<span class="hljs-property">metadata</</span>span>.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-property"</span>>source</span>)
}
}
Primeri iz resničnega sveta, ki jih implementiram:
Vprašanja o politiki podjetja
- "Kakšna je naša politika vrnitve za digitalne proizvode?"
- Sistem išče v dokumentih, LLM generiira odgovor
- Vključuje citate iz izvirnih dokumentov
Tehnična podpora s priročniki
- "Kako konfigurirati integracijo s Stripe?"
- Konsultira notranjo dokumentacijo
- Prilagojeni odgovor korak za korakom
Knowledge base za ekipe
- "Kako se nameščamo v produkcijo?"
- Išče v wikiju, runbookih, zaprtih napakah
- Odgovori s posodobljenim postopkom
Analiza pravnih dokumentov
- "Kaj pravi pogodba o SLA?"
- Ekstrahira relevantne klavzule
- Povzame v jasnem jeziku
Prednosti v primerjavi s tradicionalnim iskanjem:
- Iskanje: Vrne dokumente, ti prebereš in ekstraheš
- RAG: Vrne neposreden odgovor s stvarmi
Moji projekti sistemov RAG: 10.000-25.000€ glede na obseg dokumentov in integracij.
Avtonomni agenti
Naslednja raven: sistemi, ki delujejo, ne le odgovarjajo.
Primer: Agent za raziskavo trga
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span></span> langchain.agents <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">import</span></span> initialize_agent, Tool
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span></span> langchain.llms <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">import</span></span> OpenAI
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Definiraj orodja, ki jih lahko agent uporabi</span></span>
tools = [
Tool(
name=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Google Search&quot;</span>,
func=google_search,
description=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Iskanje posodobljenih informacij na internetu&quot;</span>
),
Tool(
name=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Web Scraper&quot;</span>,
func=scrape_website,
description=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Ekstrahira vsebino iz URL-ja&quot;</span>
),
Tool(
name=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Database Query&quot;</span>,
func=query_database,
description=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Prosi bazo podatkov konkurentov&quot;</span>
)
]
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Inicijalizacija agenta</span></span>
agent = initialize_agent(
tools,
OpenAI(model=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;gpt-<span class="hljs-number">4</span>&quot;</span>),
agent=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;zero-shot-react-description&quot;</span>
)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Izvedi kompleksno nalogo</span></span>
result = agent.run(
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Istražite cene konkurentov za proizvod X &quot;</span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;na slovenskem trgu, generirajte primerjalno poročilo&quot;</span>
)
Agent:
- Planira, katera orodja uporabiti
- Izvedi iskanja v Googlu
- Ekstrahira cene s spletnih mest konkurentov
- Prosi zgodovino v bazi podatkov
- Generiira primerjalno poročilo
Tutto avtonomno.
Poslovne primere:
- Raziskava konkurence: Cene, funkcionalnosti, ocene
- Spremljanje blagovne znamke: Omembe, čustva
- Analiza trendov: Kaj iščejo uporabniki
- Due diligence: Raziskava dobaviteljev/partnerjev
- Raziskava vsebine: Trending teme, ključne besede
Sem razvil agente AI za:
- Avtomatiziramo raziskavo trga (prihranim 20h/teden človeških)
- Spremljam omembe blagovne znamke 24/7
- Analiziram povratne informacije strank v realnem času
Analiza in generiranje vsebine
Naravna obdelava jezika uporabljena:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Avtomatska klasifikacija vstopnic za podporo</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>import<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> { <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>OpenAI<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;openai&#x27;</</span>span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>async<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>klasificaTicket<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>vsebina<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-built_in"</span>></span>string<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> completion = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> openai.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-property"</span>>chat<<span class="hljs-regexp">/span>.<span class="hljs-property">completions</</span>span>.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>create</span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>model<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>gpt-4<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>messages<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: [
{
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>role<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>system<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>content<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`Klasificiraj vstopnice v kategorije:
- bug_critico
- bug_menor
- solicitud_feature
- pregunta_uso
- queja_comercial
Odgovori samo s kategorijo.`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
},
{
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>role<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>user<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>content<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: vsebina
}
],
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>temperature<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>0<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
})
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span><<span class="hljs-regexp">/span> completion.<span class="hljs-property">choices</</span>span>[<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>0<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>].<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-property"</span>>message<<span class="hljs-regexp">/span>.<span class="hljs-property">content</</span>span>
}
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Uporaba v cevovodu podpore</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>async<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>function<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>procesarTicket<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-params"</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>ticket<span class="hljs-tag"></<span class="hljs-name">span</span>></span>: <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>Ticket<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> categoria = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>klasificaTicket<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(ticket.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-property"</span>>vsebina</span>)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Avtomatsko usmeriti</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>if<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> (categoria === <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>bug_critico<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>obvestiEkipoUrgente<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(ticket)
} <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">else</span><<span class="hljs-regexp">/span> <span class="hljs-keyword">if</</span>span> (categoria === <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>pregunta_uso<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>) {
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title function_"</span>></span>poskusiSamodejniOdgovor<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(ticket)
}
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">await</span><<span class="hljs-regexp">/span> ticket.<span class="hljs-title function_">update</</span>span>({ categoria })
}
Drugi primeri, ki jih implementiram:
- Analiza čustev v ocenah/komentarjih
- Ekstrakcija entitet (imena, datumi, omenjeni proizvodi)
- Avtomatski povzetek dolgih dokumentov
- Prevod z ohranjanjem tehnične konteksta
- Generiranje opisov proizvodov za SEO
Celoten portfolio rešitev NLP.
Računalniški vid za spletne aplikacije
Vizualna inteligenca integrirana:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span></span> openai <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">import</span></span> OpenAI
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Analiza slik z GPT-4 Vision</span></span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">def</span></span> <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>analizar_imagen</span>(<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-params"</span>>imagen_url: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">str</span></span></span>) -&gt; <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">dict</span></span>:
response = client.chat.completions.create(
model=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;gpt-<span class="hljs-number">4</span>-vision-preview&quot;</span>,
messages=[
{
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;role&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;user&quot;</span>,
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;content&quot;</span>: [
{
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;<span class="hljs-built_in">type</span>&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;text&quot;</span>,
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;text&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Podrobno opiši to sliko&quot;</span>
},
{
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;<span class="hljs-built_in">type</span>&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;image_url&quot;</span>,
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;image_url&quot;</span>: {<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;url&quot;</span>: imagen_url}
}
]
}
]
)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span></span> response.choices[<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-number"</span>><span class="hljs-number">0</span></span>].message.content
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Primeri uporabe</span></span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">def</span></span> <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>moderacion_contenido</span>(<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-params"</span>>imagen_url: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">str</span></span></span>) -&gt; <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">bool</span></span>:
descripcion = analizar_imagen(imagen_url)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Odkrij neprimerno vsebino</span></span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span></span> <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">not</span></span> <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">any</span></span>(word <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">in</span></span> descripcion.lower()
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">for</span></span> word <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">in</span></span> [<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&<span class="hljs-comment">#x27;nasilje&#x27;</span>, <span class="hljs-string">&#x27;golo&#x27;</span>, <span class="hljs-string">&#x27;neprimerno&#x27;</span>])</span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">def</span></span> <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>categorizarProducto</span>(<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-params"</span>>imagen_url: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">str</span></span></span>) -&gt; <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">str</span></span>:
descripcion = analizar_imagen(imagen_url)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Avtomatska klasifikacija</span></span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># (oblačila, elektronika, dom, itd.)</span></span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">return</span></span> clasificarPorDescripcion(descripcion)
Primeri iz resničnega življenja:
Ecommerce
- Avtomatska kategorija naloženih proizvodov
- Odkrivanje kakovosti fotografij
- Iskanje po vizualni podobnosti
Moderacija vsebine
- Avtomatski filter neprimerne slike
- Odkrivanje vizualnega spama
- Preverjanje smernic skupnosti
Dostopnost
- Samodejno generiraj alt besedilo za slike
- Opiši vizualno vsebino za bralce zaslona
Kontrola kakovosti
- Odkrivanje okvarjenih proizvodov na fotografijah
- Preverjanje pravilnega pakovanja
- Potrjevanje inštalacij
Celoten portfolio: rešitve Computer Vision.
Nove veščine spletnega programerja
Za izkoriščanje AI potrebuje spletni programer nove veščine:
1. Prompt Engineering
Zmožnost komuniciranja z LLMs je kritična:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Slab prompt (nedosledni rezultati)</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> prompt = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&quot;</span>Povzemi ta tekst<span class="hljs-symbol">&quot;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-comment"</span>></span>// Dober prompt (dosledni rezultati)<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> prompt = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`
Povzemi naslednji tekst v točno 3 ključne točke.
Vsaka točka mora:
- Biti popolna stavek
- Imeti največ 20 besed
- Začeti z <span class="hljs-symbol">&quot;</span>•<span class="hljs-symbol">&quot;</span>
Tekst:
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-subst"</span>></span>${tekst}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
Povzetek:
`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
Tehnike, ki jih mora poznati vsak spletni programer:
- Few-shot learning: Podaj primere input/output
- Chain-of-thought: Prosi za utemeljitev korak za korakom
- Role prompting: "Deluj kot strokovnjak za X"
- Constraints: Specifikacija oblike, dolžine, stila
- Temperature tuning: Nadzor ustvarjalnosti vs doslednosti
2. Vector Databases
Delo z embeddingi in semantičnim iskanjem:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">import</span><<span class="hljs-regexp">/span> { <span class="hljs-title class_">OpenAIEmbeddings</</span>span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>embeddings&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>import<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> { <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>PineconeStore<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>vectorstores&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-comment"</span>></span>// Ustvari embeddingi teksta<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> embeddings = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>new<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>OpenAIEmbeddings<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>()
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">const</span><<span class="hljs-regexp">/span> textoVector = <span class="hljs-keyword">await</</span>span> embeddings.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>embedQuery</span>(
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&quot;</span>Spletni programer, strokovnjak za Next.js<span class="hljs-symbol">&quot;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Rezultat: [0.023, -0.891, 0.445, ...] // 1536 dimenzij</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-comment"</span>></span>// Iskanje podobnih<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> resultados = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> pinecone.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>query</span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>vector<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: textoVector,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>topK<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-number"</span>></span>5<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>includeMetadata<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-literal"</span>></span>true<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
})
Vektorske baze podatkov:
- Pinecone: Upravljana, enostavna za uporabo
- Weaviate: Odprtokodna, zmogljiva
- Chroma: Lahka, dobra za razvoj
- Qdrant: Visoka zmogljivost
3. LangChain in okvirji AI
Orkestracijo kompleksnih aplikacij z LLMs:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">import</span><<span class="hljs-regexp">/span> { <span class="hljs-title class_">PromptTemplate</</span>span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>prompts&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>import<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> { <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>LLMChain<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> } <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span><<span class="hljs-regexp">/span> <span class="hljs-string">&#x27;langchain/</span>chains&#x27;</span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-comment"</span>></span>// Ponovno uporabljiva predloga<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> template = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>new<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>PromptTemplate<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>template<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span>`
Si asistent za {vloga}.
Kontekst: {kontekst}
Vprašanje uporabnika: {vprasanje}
Podaj odgovor {ton}.
`<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>inputVariables<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: [<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>vloga<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>, <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>kontekst<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>, <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>vprasanje<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>, <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>ton<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>]
})
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Chain, ki uporablja predlogo</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> chain = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>new<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>LLMChain<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>llm<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>new<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-title class_"</span>></span>ChatOpenAI<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>(),
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>prompt<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: template
})
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment">// Izvedba</span></span>
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>const<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> response = <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-keyword"</span>></span>await<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span> chain.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-title function_"</span>>call</span>({
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>vloga<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>spletni programer senior<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>kontekst<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>Uporabnik gradi spletno trgovino<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>vprasanje<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>Kateri stack priporočaš?<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>,
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-attr"</span>></span>ton<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>: <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hljs-string"</span>></span><span class="hljs-symbol">&#x27;</span>profesionalen vendar dostopen<span class="hljs-symbol">&#x27;</span><span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
})
Zakaj LangChain:
- Abstracts kompleksnost klicev LLMs
- Chains za kompleksne delovne tokove
- Agenti za avtonomne naloge
- Spomin za conversacijo na stanju
- Integracije s 50+ storitvami
4. MLOps in nameščanje modelov
Prenos modelov v produkcijo na zanesljiv način:
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># Primer: Fine-tuning lastnega modela</span></span>
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">from</span></span> openai <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-keyword"</span>><span class="hljs-keyword">import</span></span> OpenAI
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># 1. Priprava nabora podatkov</span></span>
training_data = [
{
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;messages&quot;</span>: [
{<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;role&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;system&quot;</span>, <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;content&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Klasifikator nujnosti&quot;</span>},
{<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;role&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;user&quot;</span>, <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;content&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Sistem je padel&quot;</span>},
{<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;role&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;assistant&quot;</span>, <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;content&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;NUJNO&quot;</span>}
]
},
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># ... več primerov</span></span>
]
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># 2. Nalaganje nabora podatkov</span></span>
file = client.files.create(
file=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">open</span></span>(<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;training_data.jsonl&quot;</span>, <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;rb&quot;</span>),
purpose=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;fine-tune&quot;</span>
)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># 3. Fine-tune</span></span>
job = client.fine_tuning.jobs.create(
training_file=file.<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-built_in"</span>><span class="hljs-built_in">id</span></span>,
model=<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;gpt-<span class="hljs-number">3.5</span>-turbo&quot;</span>
)
<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-comment"</span>><span class="hljs-comment"># 4. Uporaba lastnega modela</span></span>
completion = client.chat.completions.create(
model=job.fine_tuned_model,
messages=[
{<span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;role&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;user&quot;</span>, <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;content&quot;</span>: <span <span class="hljs-keyword">class</span>=<span class="hljs-string">"hljs-string"</span>>&quot;Aplikacija je počasna&quot;</span>}
]
)
Ključni vidiki MLOps:
- Verzioniranje modelov: Sledenje poskusom
- Spremljanje: Natančnost, latenca, stroški
- A/B testiranje: Primerjava modelov v produkciji
- Rollback: Povratek na prejšnjo različico, če je potrebno
- Predpomnjenje: Zmanjšanje nepotrebnih klicev API-ja
Celoten portfolio: storitve MLOps.
Stroški in ROI umetne inteligence pri spletnem razvoju
Je ekonomsko smiselno?
Stroški API-jev AI
OpenAI GPT-4 (januar 2026):
- Vnos: 0,03 $/1K žetonov (~750 besed)
- Rezultat: 0,06 $/1K žetonov
Primer iz resničnega sveta: Chatbot za strežbo strank
- 1.000 pogovorov/dan
- ~500 žetonov na pogovor (vnos + rezultat)
- Stroški: 25-30$/dan = 750-900€/mesec
Alternativa človeka:
- 1 agent: 2.000€/mesec
- Pokriva ~500 pogovorov/dan v 8h
- Za 1.000 pogovorov: 2 agenta = 4.000€/mesec
Prihranek: ~3.000€/mesec s chatbotom AI
Stroški razvoja
Tradicionalni chatbot vs AI:
| Vidik | Tradicionalni | Z AI |
|---|---|---|
| Začetni razvoj | 3-4 tedne | 1-2 tedni |
| Stroški razvoja | 6.000-10.000€ | 4.000-8.000€ |
| Funkcionalnosti | Omejene | Obsežne |
| Vzdrževanje | Visoko (dodajanje odgovorov) | Nizko (samo prilagajanje promptov) |
Tipični ROI: 3-6 mesecev za povrnitev investicije.
Produktivnost spletnega programerja
Moja osebna izkušnja z GitHub Copilotom:
- Stroški: 10$/mesec (zanemarljivo)
- Prihranjena časa: 15-20h/mesec
- Enako: 3-5 delovnih dni/mesec
- ROI: 150-200x stroški
Neuporaba AI v 2026 = tekmovanje z vezano roko.
Prihodnost: kam gremo
Napovedi za 2027-2030
1. AI kot mladi razvojni programer
V 2-3 letih bodo LLMs lahko:
- Implementirah kompleksne funkcije iz specifikacije
- Sami napišejo teste
- Preuredijo staro kodo
- Obsežno dokumentirajo
Vloga spletnega programerja se bo razvila v:
- Arhitekt sistemov
- Pregledovalec kode, generirane z AI
- Tehnični product manager
- Strokovnjak za prompt engineering
2. No-code/low-code ojačan z AI
- Opis aplikacije v naravnem jeziku
- AI generiira popolno kodo
- Programer samo prilagodi in personalizira
To bo odpravilo: Dolgočasno boilerplate kodo To NE bo odpravilo: Potreba razumevanja arhitekture, testiranja, varnosti
3. 100% conversacijske aplikacije
- Naravni vmesniki (glas + besedilo)
- Aplikacije, ki razumejo polni kontekst
- "Ustvari poročilo o prodaji za zadnje četrtletje" → opravljeno
- Spletni programer mora oblikovati te izkušnje
4. AI specializirana za domeno
- Modelih fine-tuned za ecommerce, zdravstvo, finance
- Ne splošni spletni programerji
- DA spletni programerji + domenski strokovnjaki + AI
Veščine, ki ostajajo kritične
Kaj AI ne bo zamenjala:
✅ Razumevanje poslovanja stranke
- AI ne ve, kaj so tvoji pravi cilji
- Prevajanje poslovnih potreb v tehnične specifikacije
✅ Arhitektura sistemov
- Odločitve o razširljivosti
- Trgovanje s tehnologijo
- Vzorci za zapletene probleme
✅ Varnost in zasebnost
- Revija kode za ranljivosti
- Izvajanje varnostnih najboljših praks
- Zakonodajna skladnost (GDPR, itd.)
✅ Testiranje in kakovost
- Oblikovanje strategije testiranja
- Robni primeri, ki jih AI ne premisli
- Strukturiran refaktoring
✅ Empatija in komunikacija
- Razumevanje razočaranja uporabnika
- Pojašnjenje tehnične odločitve ne-tehnikom
- Upravljanje pričakovanj
Najboljši spletni programer prihodnosti:
- Obvlada osnovne ( algoritmi, arhitektura, vzorci)
- Uporablja AI za pospešitev izvajanja
- Fokusira čas na kompleksne probleme in strategijo
Moj pristop kot spletni programer + AI
Kombiniram 33 let izkušenj s sodobno AI:
Kaj uporabljam AI za:
- ✅ Boilerplate kodo (testi, vrste, migracije)
- ✅ Prva dokumentacija
- ✅ Predloge optimizacije
- ✅ Raziskava tehnologij
Kaj vedno osebno naredim:
- ✅ Arhitektura sistemov
- ✅ Kritične tehnične odločitve
- ✅ Obsežna pregledava kode
- ✅ Audit varnosti
- ✅ Integracijsko in E2E testiranje
Rezultat: +40% produktivnost brez žrtvovanja kakovosti.
Storitve, ki jih nudim z AI:
- Sistemi RAG za knowledge bases
- Inteligentni chatboti za strežbo strank
- Avtonomni agenti za avtomatizacijo
- Integracija API-jev AI
- Computer Vision uporabljena
- NLP za analizo besedila
- MLOps za modele v produkciji
- Posvetovanje za arhitekture AI
Zagotovilo: Obvezni TDD, dokumentirana koda, doživljenjsko zagotovilo.
Zaključek: prilagoditi se ali ostati zaostali
AI ne bo odpravila spletnega programerja. Govorila bo:
- Odpraviti dosadne naloge (boilerplate, osnovna dokumentacija)
- Dvigniti raven kompetence je bilo potrebno
- Omogočiti ustvarjanje bolj sofisticiranih aplikacij v manj časa
- Demokratizirati zmogljivosti prej samo v velikih podjetjih
Spletni programer, ki uspeva v 2026:
- Obvlada trdne osnove
- Sprejme AI kot orodje, ne kot grožnjo
- Se specializira za integracijo AI v prave aplikacije
- Razume omejitve in zmogljivosti LLMs
- Nikoli ne preneha učiti se
Kaj se ne spremeni:
- Potreba razumevanja poslovanja
- Pomen trdne arhitekture
- Testiranje in kakovost nista za pogajanja
- Komunikacija in empatija s strankami
S 33 leti razvoja sem videl ducat "tehnoloških revolucij". AI je resnična, vendar ne spreminja temeljnih načel dobrega razvoja.
Želiš integrirati AI v svoje podjetje? Povej mi svoj primer in prejmi:
- Analiza izvedljivosti
- Tehnični predlog
- Ocena ROI
- Podrobna cena
Vse v manj kot 24 ur.
Jordi Morillo - Spletni programer + AI Engineering | 33 let izkušenj | Celoten portfolio AI