{"version":"1.0","provider_name":"Ana Borrego Toledo","provider_url":"https:\/\/aborrego.inscastellbisbal.net\/en","author_name":"aborrego","author_url":"https:\/\/aborrego.inscastellbisbal.net\/en\/author\/aborrego\/","title":"Codi net i ben documentat (Comentaris al codi) - Ana Borrego Toledo","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"6WZ5vb9PSA\"><a href=\"https:\/\/aborrego.inscastellbisbal.net\/en\/2025\/03\/19\/codi-net-i-ben-documentat-comentaris-al-codi\/\">Codi net i ben documentat (Comentaris al codi)<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/aborrego.inscastellbisbal.net\/en\/2025\/03\/19\/codi-net-i-ben-documentat-comentaris-al-codi\/embed\/#?secret=6WZ5vb9PSA\" width=\"600\" height=\"338\" title=\"&#8220;Codi net i ben documentat (Comentaris al codi)&#8221; &#8212; Ana Borrego Toledo\" data-secret=\"6WZ5vb9PSA\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script>\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/\/# sourceURL=https:\/\/aborrego.inscastellbisbal.net\/wp-includes\/js\/wp-embed.min.js\n<\/script>","description":"codi net i ben documentat (comentaris al codi) Tornar al repte 1.6 He\u00a0 organitzat el codi en Google Colabs de una manera organitzada i neta (#). 1. Comentaris detallats -Comentaris a cada pas del codi (Alg1, Alg2, Alg3&#8230;) que expliquen la funcionalitat de cada l\u00ednia. -Explicaci\u00f3 de condicions i possibles errors, per exemple: &#8211;Divisi\u00f3 en seccions clares: El codi est\u00e0 estructurat amb l\u00ednies de separaci\u00f3 # ============================== que ajuden a identificar r\u00e0pidament cada bloc funcional (Configuraci\u00f3 de l&#8217;API, Web Scraping, Servidor Flask, etc.). &#8211;Ordre l\u00f2gic: Les importacions de llibreries es fan primer, seguides de la configuraci\u00f3 de l\u2019API, la configuraci\u00f3 del xat, l&#8217;extracci\u00f3 d&#8217;informaci\u00f3 de la web i finalment l\u2019inici del servidor. Aquest codi est\u00e0 ben estructurat perqu\u00e8 segueix un ordre l\u00f2gic i organitzat, facilitant la seva lectura i manteniment: Aix\u00f2 garanteix que tots els m\u00f2duls estiguin disponibles abans d&#8217;importar-los. 2. Organitzaci\u00f3 Aquest codi est\u00e0 ordenat en un flux l\u00f2gic de dalt a baix: Instal\u00b7laci\u00f3 de llibreries (per evitar errors d&#8217;importaci\u00f3). Importaci\u00f3 de llibreries (seguint una l\u00f2gica de depend\u00e8ncies). Configuraci\u00f3 de l&#8217;API (comprova si la clau d&#8217;API est\u00e0 disponible). Instruccions del sistema (estableix normes i estil de resposta de l\u2019IA). Configuraci\u00f3 del model d&#8217;IA (defineix el model i par\u00e0metres). Extracci\u00f3 de dades web (web scraping). Configuraci\u00f3 del servidor Flask (per permetre comunicaci\u00f3 amb el frontend). Definici\u00f3 de la ruta de xat (per gestionar les converses). Execuci\u00f3 del servidor (per posar en marxa el sistema). 2.1 Instal\u00b7laci\u00f3 de llibreries Primer, el codi assegura que totes les llibreries necess\u00e0ries estiguin instal\u00b7lades abans de continuar. Aix\u00f2 evita errors si alguna no est\u00e0 disponible en l&#8217;entorn on s&#8217;executa. Despr\u00e9s de la instal\u00b7laci\u00f3, el codi importa totes les llibreries necess\u00e0ries per funcionar: L&#8217;ordre d&#8217;importaci\u00f3 segueix una l\u00f2gica: primer les eines per web scraping (BeautifulSoup, requests), despr\u00e9s la IA (genai), i finalment el servidor (Flask, ngrok). # La primera vegada, desmarca la l&iacute;nia de sota per a instal&middot;lar la biblioteca # Nom&eacute;s desmarcar si no tens les llibreries instal&middot;lades pr&egrave;viament !pip install google-genai # Alg1: Instal&middot;la la llibreria google-genai per interactuar amb el model GenAI !pip install beautifulsoup4 requests # Alg2: Instal&middot;la BeautifulSoup per web scraping i requests per fer peticions HTTP !pip install flask flask-ngrok # Alg3: Instal&middot;la Flask per crear el servidor web i Flask-ngrok per exposar el servidor !pip install flask pyngrok # Alg4: Instal&middot;la Flask per crear el servidor i pyngrok per crear t&uacute;nels amb Ngrok !pip install flask-cors # Alg5: Instal&middot;la Flask-CORS per gestionar CORS (peticions des de diferents or&iacute;gens) import bs4 # Alg6: Importa BeautifulSoup per analitzar el contingut HTML de les p&agrave;gines web import requests # Alg7: Importa requests per fer peticions HTTP from flask_cors import CORS # Alg8: Importa CORS per activar la compartici&oacute; de recursos entre diferents or&iacute;gens from google import genai # Alg9: Importa la llibreria de GenAI per generar respostes amb el model de Google from google.colab import userdata # Alg10: Importa userdata per obtenir dades d&#039;usuari a Google Colab from bs4 import BeautifulSoup # Alg11: Torna a importar BeautifulSoup per a l&#039;an&agrave;lisi HTML from flask import Flask, request, jsonify # Alg12: Importa Flask per gestionar el servidor web i les peticions HTT from pyngrok import ngrok # Alg13: Importa ngrok per crear un t&uacute;nel per a l&#039;aplicaci&oacute; web local # ============================== # CONFIGURACI&Oacute; DE L&#039;API # ============================== GOOGLE_API_KEY = userdata.get(&quot;GOOGLE_API_KEY&quot;) # Alg14: Obt&eacute; la clau API de Google des de userdata a Google Colab if not GOOGLE_API_KEY: # Alg15: Comprova si la clau API s&#039;ha configurat correctament print(&quot;\u26a0\ufe0f No s&#039;ha trobat la clau API. Configura-la a Colab abans d&#039;executar el programa.&quot;) # Alg16: Missatge d&#039;error si la clau no es troba exit() # Alg17: Termina l&#039;execuci&oacute; del programa si la clau API no es troba client = genai.Client(api_key=GOOGLE_API_KEY) # Alg18: Crea una inst&agrave;ncia del client de GenAI amb la clau API # ============================== # INSTRUCCIONS DEL SISTEMA # ============================== system_instruction =&quot;&quot;&quot; Ets un alumne del cicle de sistemes microinform&agrave;tics i xarxes a l&rsquo;Institut Castellbisbal. Et dius Ana Borrego Toledo i est&aacute;s cursant un grau mitj&agrave; de Sistemes microinform&agrave;tics i xarxes. Respon amb un to divertit i enginy&oacute;s. estil desenfadat, per&ograve; sense faltar al respecte. \ud83d\udccc **Normes de comportament**: - **Respon nom&eacute;s a preguntes relacionades amb el cicle, la teva web i el teu perfil acad&egrave;mic.** - **Ignora** qualsevol comentari fora de lloc, incloent temes personals, pol&iacute;tics o no relacionats amb l&#039;&agrave;mbit acad&egrave;mic. - **No responguis** a comentaris ofensius, grollers o innecessaris. - Si alg&uacute; fa una pregunta fora de context, com per exemple: &quot;Ai ai... crec que el meu cable de xarxa s&#039;ha desconnectat! No puc respondre aix&ograve;!&quot; &quot;Aix&ograve; no est&agrave; dins del meu contracte de chatbot! Pregunta&rsquo;m sobre inform&agrave;tica!&quot; En el cicle de sistemes microinform&agrave;tics i xarxes que curses es treballa a partir de REPTES. En cada REPTE, primer realitzes una s&egrave;rie de tasques que et permeten tocar diferents temes o conceptes del m&ograve;dul. Quan acabes el repte, passes a la fase de manaments, on demostres que has adquirit nous coneixements a trav&eacute;s de les tasques realitzades. Aquesta fase &eacute;s l&rsquo;encarregada de valorar si has ent&egrave;s correctament el contingut i, en base a aix&ograve;, es decideix si aproves o no el m&ograve;dul i els coneixements. Els REPTES es fan en grup o individualment. Ignora els comentaris fora de lloc, ax&iacute; com comentaris sexuals, personals...&quot;&quot;&quot; chat = client.chats.create( # Alg20: Crea una sessi&oacute; de xat amb historial autom&agrave;tic i instruccions personalitzades model=&quot;gemini-2.0-flash&quot;, # Alg21: Configura el model de llenguatge (verifica que sigui compatible amb la versi&oacute; de GenAI) config=genai.types.GenerateContentConfig( # Alg22: Configura les opcions del model de llenguatge system_instruction=system_instruction, # Alg23: Inclou les instruccions per personalitzar el comportament temperature=0.7, # Alg24: Configura el nivell de creativitat del model (0 a 1, on 0 &eacute;s m&eacute;s determinista) max_output_tokens=200 # Alg25: Configura la longitud m&agrave;xima de la resposta generada ) ) # ============================== # EXTRAURE INFORMACI&Oacute; DE LA P&Agrave;GINA WEB (web scrapping) # ============================== url = &quot;https:\/\/aborrego.inscastellbisbal.net\/ipop\/&quot; # Alg26: URL de la p&agrave;gina web de la qual es vol extreure informaci&oacute; response = requests.get(url) # Alg27: Realitza una petici&oacute; GET per obtenir el contingut HTML ... Read more"}