Sfetcu, Nicolae (2025), Dezvoltarea unui chatbot pentru servicii clienți cu ChatGPT, IT & C, 4:3, 51-66, DOI: 10.58679/IT92596, https://www.internetmobile.ro/dezvoltarea-unui-chatbot-pentru-servicii-clienti-cu-chatgpt/

Developing a Chatbot for Customer Service with ChatGPT

Abstract

In a world where customer experience has become a key differentiator, fast, personalized responses are no longer a “nice-to-have” but a natural expectation. AI-powered chatbots are today the most accessible solution for providing 24/7 support, taking over repetitive tasks and freeing up human teams for complex situations. Of all the technologies available, OpenAI’s conversational models – brought together under the ChatGPT umbrella – stand out for their language quality, flexibility, and ease of API integration.

This article aims to guide you step-by-step through the process of creating a customer service chatbot, built in Python and exposed in a web application.

Keywords: chatbot, bot, ChatGPT, API, Python, OpenAI, framework

Rezumat

Într-o lume în care experiența clientului a devenit un diferențiator esențial, răspunsurile rapide și personalizate nu mai sunt un „nice-to-have”, ci o așteptare firească. Chatbot-urile alimentate de inteligență artificială reprezintă astăzi cea mai la îndemână soluție pentru a oferi suport 24/7, preluând sarcini repetitive și eliberând echipele umane pentru situații complexe. Dintre toate tehnologiile disponibile, modelele conversaționale de la OpenAI – reunite sub umbrela ChatGPT – se remarcă prin calitatea limbajului, flexibilitate și ușurința integrării prin API.

Acest articol își propune să vă conducă pas cu pas prin procesul de creare a unui chatbot pentru servicii clienți, construit în Python și expus într-o aplicație web.

Cuvinte cheie: chatbot, bot, ChatGPT, API, Python, OpenAI, framework

IT & C, Volumul 4, Numărul 3, Septembrie 2025, pp. 51-66
ISSN 2821 – 8469, ISSN – L 2821 – 8469, DOI: 10.58679/IT92596
URL: https://www.internetmobile.ro/dezvoltarea-unui-chatbot-pentru-servicii-clienti-cu-chatgpt/
© 2025 Nicolae SFETCU. Responsabilitatea conținutului, interpretărilor și opiniilor exprimate revine exclusiv autorilor.

Dezvoltarea unui chatbot pentru servicii clienți cu ChatGPT

Nicolae SFETCU[1]
nicolae@sfetcu.com

[1] Cercetător – Academia Română (Comitetul Român de Istoria și Filosofia Științei și Tehnicii (CRIFST) , Divizia de Istoria Științei (DIS)), ORCID: 0000-0002-0162-9973

Introducere

Într-o lume în care experiența clientului a devenit un diferențiator esențial, răspunsurile rapide și personalizate nu mai sunt un „nice-to-have”, ci o așteptare firească. Chatbot-urile alimentate de inteligență artificială reprezintă astăzi cea mai la îndemână soluție pentru a oferi suport 24/7, preluând sarcini repetitive și eliberând echipele umane pentru situații complexe. Dintre toate tehnologiile disponibile, modelele conversaționale de la OpenAI – reunite sub umbrela ChatGPT – se remarcă prin calitatea limbajului, flexibilitate și ușurința integrării prin API.

Acest articol își propune să vă conducă pas cu pas prin procesul de creare a unui chatbot pentru servicii clienți, construit în Python și expus într-o aplicație web.

Prezentare generală a arhitecturii soluției

Un chatbot pentru servicii clienți bazat pe ChatGPT implică interacțiunea dintre trei componente principale: interfața utilizator (frontend), serverul aplicației (backend) și serviciul extern OpenAI (API-ul ChatGPT). Pe scurt, fluxul funcționează astfel:

• Utilizatorul (browser-ul web) introduce o întrebare sau solicitare în interfața de chat.
• Frontend-ul (pagina web) trimite mesajul utilizatorului către backend printr-o cerere HTTP (de exemplu, o cerere POST către un endpoint al serverului web).
• Backend-ul (serverul Flask/FastAPI) primește mesajul și apelează API-ul OpenAI (serviciul ChatGPT) trimițându-i promptul (și contextul conversației, dacă este cazul). Backend-ul include în cerere cheia API și specifică modelul ChatGPT dorit (de ex. gpt-3.5-turbo).
• Serviciul ChatGPT (OpenAI) procesează promptul și întoarce un răspuns generat folosind modelul AI.
• Backend-ul primește răspunsul de la ChatGPT și îl transmite înapoi către frontend (ca răspuns HTTP, de obicei în format JSON sau HTML).
• Frontend-ul afișează răspunsul în interfața de chat, astfel încât utilizatorul să îl poată vedea. Utilizatorul poate continua dialogul, trimițând un nou mesaj, care va fi procesat în același mod (menținând contextul conversației, dacă este implementat acest aspect).

Figura 1: Arhitectura chatbot. Exemplu de concept al unui chatbot integrat într-o aplicație web, folosind ChatGPT și un framework backend precum Flask.

În această arhitectură, browser-ul acționează ca client (partea de prezentare), serverul web (codul Python) reprezintă logica de aplicație care intermediază între client și serviciul AI, iar modelul ChatGPT de la OpenAI rulează în cloud, furnizând inteligența conversațională. Avantajul folosirii API-ului ChatGPT este că putem integra puterea modelului în propria noastră aplicație și interfață personalizată, în loc să fim limitați la interfața standard ChatGPT (Loo 2023). De asemenea, această separare asigură securitatea cheii API (cheia secretă rămâne pe server, nefiind expusă în browser) și controlează fluxul de mesaje.

Notă: Chatbot-ul nostru va fi stateless din perspectiva OpenAI – adică modelul nu „ține minte” conversația decât dacă îi trimitem istoricul în fiecare cerere. Vom discuta mai jos despre cum putem simula o conversație continuă prin trimiterea unui istoric de mesaje.

Crearea contului OpenAI și obținerea unui API key

Pentru a utiliza API-ul ChatGPT, este necesar un cont de dezvoltator OpenAI și o cheie API privată:

• Înregistrare cont OpenAI: Accesați platforma OpenAI (de ex. platform.openai.com) și creați un cont dacă nu aveți deja. Este posibil să vi se ceară un număr de telefon pentru verificare. Autentificați-vă apoi în contul de dezvoltator.
• Accesarea secțiunii de chei API: După logare, navigați la panoul de control al contului vostru OpenAI. În meniul din platformă, găsiți secțiunea „API Keys” (chei API) – acolo veți gestiona cheile (Codecademy 2025). (Alternativ, puteți accesa direct URL-ul https://platform.openai.com/account/api-keys pentru a ajunge la pagina de chei API).
• Crearea unei chei secrete noi: În pagina „API Keys”, faceți clic pe butonul “Create new secret key” (Crează cheie nouă). Vi se va solicita să dați un nume cheii (opțional, pentru a o identifica) și apoi veți confirma crearea ei (Codecademy 2025). Platforma va afișa o dată noua cheie generată (un șir lung de caractere). Atenție: copiați această cheie și salvați-o într-un loc sigur în acest moment. Din motive de securitate, OpenAI nu vă mai arată cheia completă după ce părăsiți pagina (Codecademy 2025). Dacă pierdeți cheia, va trebui să generați alta nouă.
• Configurare facturare: Crearea contului și a cheii API este gratuită, însă utilizarea efectivă a API-ului este tarifată pe baza consumului (un model pay-as-you-go). Asigurați-vă că adăugați o metodă de plată în contul vostru OpenAI și verificați creditul gratuit oferit (OpenAI oferă adesea o sumă de credit de testare la început). Costul variabil depinde de modelul folosit și numărul de tokeni procesați în solicitare și răspuns (Loo 2023) (de exemplu, modelul gpt-3.5-turbo este mai ieftin per 1000 de tokeni comparativ cu GPT-4).
• Protejarea cheii: Tratați cheia API ca pe o parolă – nu o distribuiți public și nu o includeți în codul sursă vizibil public (de ex. pe GitHub). O bună practică este să stocați cheia în variabile de mediu sau fișiere de configurare ignorate de controlul versiunilor. Vom vedea mai jos cum s-o folosim în cod prin variabile de mediu.

După ce aveți cheia API, sunteți gata să integrați serviciul ChatGPT în aplicația voastră Python.

Exemplu de cod în Python pentru interacțiunea cu API-ul ChatGPT

Pentru a apela API-ul OpenAI din Python, putem folosi biblioteca oficială OpenAI pentru Python (disponibilă via pip). Pașii de bază sunt:

• Instalarea bibliotecii OpenAI: În mediul vostru Python, instalați pachetul openai. De exemplu, rulând comanda: pip install openai. (Asigurați-vă că folosiți un mediu virtual sau includeți pachetul în proiectul vostru). Eventual, actualizați-l la ultima versiune: pip install –upgrade openai (Loo 2023).
• Setarea cheii API în cod: Există două metode principale: fie setăm cheia ca variabilă globală pentru biblioteca OpenAI, fie folosim direct parametru. Cel mai simplu mod este:

import openai
openai.api_key = "CHEIA_VOASTRĂ_API"

În loc să hard-codați cheia, este recomandat să o încărcați dintr-o variabilă de mediu pentru a nu fi expusă. Exemplu:

import os, openai
openai.api_key = os.getenv("OPENAI_API_KEY")

unde OPENAI_API_KEY a fost setată în mediul de execuție (sau într-un fișier .env încărcat cu ajutorul bibliotecii python-dotenv).

• Apelarea metodei de completare (ChatCompletion): OpenAI oferă diferite modele și endpoint-uri. Pentru un chatbot, vom folosi endpoint-ul de Chat Completion, care suportă modelele de conversație (cum ar fi GPT-3.5-Turbo sau GPT-4). O cerere minimă arată astfel:

response = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[
        {"role": "system", "content": "Ești un asistent de suport clienți politicos și util."},
        {"role": "user", "content": "Bună, am o problemă cu comanda mea."}
    ]
)
răspuns_text = response.choices[0].message.content
print(răspuns_text)

În exemplul de mai sus, am specificat modelul (gpt-3.5-turbo) și am furnizat o listă de mesaje:

• Mesajul cu role: „system” setează contextul sau comportamentul asistentului (prompt de sistem). În cazul nostru, îl instruiește pe chatbot să aibă rolul unui asistent de suport clienți politicos. (Acest mesaj de sistem este opțional, dar util pentru a influența tonul și stilul răspunsurilor).
• Mesajul cu role: „user” conține întrebarea sau cererea utilizatorului. Într-un flux de conversație real, la fiecare pas vom adăuga un nou mesaj de tip „user” (și eventual și răspunsurile anterioare de tip „assistant”).

Funcția ChatCompletion.create va returna un obiect care conține, între altele, lista de răspunsuri posibile. De obicei, luăm primul răspuns: response.choices[0].message.content conține textul răspunsului generat de model (Codecademy 2025). În exemplul de mai sus, response_text va conține efectiv mesajul de la asistent (de exemplu, un mesaj de scuze și asistență privind comanda).

Înainte de a continua, câteva explicații importante despre parametri și structură:

• Cheia API: Am setat api_key direct în cod (sau prin mediu). Alternativ, puteam trimite cheia în header-ul HTTP al cererii ca Authorization: Bearer <API_KEY> (Codecademy 2025) dacă am fi folosit biblioteca requests. Biblioteca oficială OpenAI însă ne scutește de gestionarea manuală a headerelor, atâta timp cât openai.api_key este setată corect.
• Modelul: Parametrul model specifică ce model AI folosim. Pentru ChatGPT, opțiunile comune sunt „gpt-3.5-turbo” sau „gpt-4” (dacă aveți acces la GPT-4). Asigurați-vă că modelul ales este disponibil pentru cheia voastră și că țineți cont de costul fiecăruia.
• Mesajele (messages): Reprezintă istoricul conversației trimise modelului. API-ul ChatGPT așteaptă o listă de obiecte JSON, fiecare având role (rolul în conversație) și content (conținutul mesajului) (Loo 2023). Rolurile posibile sunt:
  • „system” – folosit de dezvoltator pentru a fixa contextul conversației sau personalitatea asistentului (de exemplu, „Ești un asistent care ajută clienții cu comenzile online”).
  • „user” – un mesaj care provine de la utilizator (cererea sau întrebarea efectivă).
  • „assistant” – un mesaj care provine de la asistent (răspunsurile modelului). Când trimiteți o nouă cerere, puteți include ultimul răspuns al modelului ca parte din istoricul mesajelor (vezi secțiunea despre păstrarea contextului).

Ordinea mesajelor contează: modelul va vedea această listă în ordine și va genera continuarea conversației. La prima interacțiune, de obicei trimitem un singur mesaj de tip „user” (eventual precedat de un „system”). Pentru dialog continuu, vom trimite la fiecare apel tot istoricul: de exemplu, messages=[{„role”:”system”,”content”:”…”}, {„role”:”user”,”content”:”întrebarea1″}, {„role”:”assistant”,”content”:”răspunsul1″}, {„role”:”user”,”content”:”întrebarea2″}] și modelul va genera răspunsul 2 ca și cum ar continua discuția.

• Alți parametri opționali: Se pot specifica max_tokens (limita de tokeni din răspuns, dacă dorim), temperature (creativitatea/randomizarea răspunsului, de obicei 0.7 implicit), n (numărul de variante de răspuns generate), stop (șiruri de oprire) etc., însă pentru început, modelul și mesajele sunt suficiente. ChatGPT are implicit un comportament destul de conversațional cu setările default.
• Tratarea erorilor: Este recomandat să includeți blocuri de tip try/except în jurul apelurilor API, pentru a prinde eventuale erori (de rețea, de autentificare – de ex. dacă cheia e invalidă, sau erori legate de depășirea contextului de tokeni). În caz de eroare, backend-ul poate returna un mesaj de eroare prietenos către utilizator (ex: “Ne pare rău, a apărut o eroare. Vă rugăm să încercați din nou.”).

După cum vedem, cu doar câteva linii de cod putem obține un răspuns de la ChatGPT (Codecademy 2025). Următorul pas este să integrăm acest apel într-o aplicație web, astfel încât utilizatorii finali să poată interacționa cu chatbot-ul printr-o pagină web.

Integrarea frontend-backend pentru trimiterea mesajelor și primirea răspunsurilor

Pentru a oferi o interfață utilizatorului, vom crea o pagină web simplă (HTML/CSS/JS) care comunică cu backend-ul nostru Python. Iată cum putem proceda pas cu pas:

1. Backend – definirea endpoint-ului de chat: În aplicația Python (Flask sau FastAPI) vom avea un endpoint (o rută) la care frontend-ul va trimite mesajele utilizatorului. De exemplu, un endpoint /chat care acceptă cereri POST conținând mesajul. Când serverul primește o astfel de cerere, va apela funcția OpenAI de completare (ca mai sus) și va întoarce rezultatul. Logic, codul ar arăta așa în Flask:

from flask import Flask, request, jsonify
import openai, os

app = Flask(__name__)
openai.api_key = os.getenv("OPENAI_API_KEY")  # cheia API din mediu

@app.route("/chat", methods=["POST"])
def chat():
    data = request.get_json()  # presupunem că mesajul vine ca JSON în corpul cererii
    user_message = data.get("message", "")
    if not user_message:
        return jsonify({"error": "Mesaj gol"}), 400
    # Apel către OpenAI cu mesajul primit
    try:
        response = openai.ChatCompletion.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "You are a helpful customer support assistant."},
                {"role": "user", "content": user_message}
            ]
        )
        answer = response.choices[0].message.content
        return jsonify({"response": answer})
    except Exception as e:
        return jsonify({"error": str(e)}), 500

Explicație: endpoint-ul /chat primește o cerere POST cu un JSON ce conține cheia „message” (textul întrebării). Folosim openai.ChatCompletion.create exact ca în exemplul anterior (posibil fără a include întotdeauna promptul de sistem – acesta poate fi și fixat o dată la început). Rezultatul este trimis înapoi sub formă de JSON, cu cheia „response” ce conține răspunsul text al modelului (GeeksforGeeks 2025). În caz de eroare, returnăm un cod HTTP 500 și detalii (în practică am putea ascunde detaliile și doar indica o eroare generică).

Pentru FastAPI, codul ar fi similar, definind o funcție asociată rutei /chat și folosind pydantic pentru validarea input-ului. De exemplu, folosind FastAPI am putea scrie:

from fastapi import FastAPI
from pydantic import BaseModel
import openai, os

app = FastAPI()
openai.api_key = os.getenv("OPENAI_API_KEY")

class Message(BaseModel):
    message: str

@app.post("/chat")
async def chat_endpoint(msg: Message):
    user_message = msg.message
    try:
        response = openai.ChatCompletion.create(
            model="gpt-3.5-turbo",
            messages=[{"role": "user", "content": user_message}]
        )
        answer = response.choices[0].message.content
        return {"response": answer}
    except Exception as e:
        return {"error": str(e)}

2. Frontend – trimiterea cererii către backend: Partea de HTML/JS va trebui să trimită mesajul utilizatorului la endpoint-ul de mai sus și să afișeze răspunsul primit. Există două abordări posibile:
3. Trimitere prin formular și actualizare pagină server-side: Aceasta este o abordare simplă, în care pagina HTML conține un formular (cu un câmp de text pentru mesaj și un buton „Trimite”). Când utilizatorul apasă butonul, formularul face submit către server (către ruta /chat), iar serverul poate fie să redirecționeze înapoi către aceeași pagină cu răspunsul inclus (de exemplu, să renderizeze un template cu întrebarea și răspunsul). Aceasta este metoda tradițională, dar implică reîncărcarea paginii la fiecare întrebare. Exemplu minimal de cod (Flask) pentru această abordare a fost prezentat într-un tutorial HomeGPT (Dan 2024): cererea POST preia prompt din request.form, obține response = client.chat.completions.create(…) și apoi redă template-ul HTML cu variabilele prompt și response populate. Acest model simplu funcționează, dar nu oferă o experiență fluidă (fiecare întrebare reîncarcă pagina).
4. Trimitere prin AJAX (XHR/fetch) și actualizare dinamică: O abordare mai modernă este ca pagina web să trimită cererea asincron, folosind JavaScript (de exemplu fetch API sau un utilitar precum jQuery AJAX), și să actualizeze DOM-ul fără o reîncărcare completă a paginii. Acest lucru oferă o experiență de chat mai fluidă, similară aplicațiilor de mesagerie.

Să detaliem varianta cu AJAX, deoarece oferă un feeling mai interactiv:

• Pagina HTML va conține elemente pentru chat: un câmp de introducere a textului (input sau textarea) unde utilizatorul scrie întrebarea, un buton de trimitere (sau eveniment la apăsarea Enter) și o zonă unde apar mesajele conversației (mesajele utilizatorului și ale botului).
• Un script JavaScript (posibil chiar la finalul paginii sau fișier separat) se ocupă de evenimentul de submit. De exemplu, ascultă evenimentul de click pe buton sau submit al formularului, previne acțiunea implicită și în loc de a face un submit normal, colectează textul introdus și îl trimite cu fetch către backend:

document.getElementById("sendBtn").onclick = async function() {
    const userMsg = document.getElementById("mesaj").value;
    if (!userMsg) return;
    // adaugă mesajul utilizatorului în fereastra de chat (optimist)
    adaugaMesajUtilizator(userMsg);
    document.getElementById("mesaj").value = "";  // golește inputul
    try {
        let response = await fetch("/chat", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({message: userMsg})
        });
        if (response.ok) {
            let data = await response.json();
            if (data.response) {
                adaugaMesajBot(data.response);
            } else if (data.error) {
                adaugaMesajBot("[Eroare]: " + data.error);
            }
        } else {
            adaugaMesajBot("[Eroare]: " + response.statusText);
        }
    } catch(err) {
        adaugaMesajBot("[Eroare de rețea]");
    }
}

În codul de mai sus, adaugaMesajUtilizator și adaugaMesajBot reprezintă funcții ce creează elemente noi în pagina HTML (de exemplu, adaugă un <p> cu textul, eventual stilizat diferit pentru utilizator vs. bot). Am inclus un optimistic update: afișăm imediat mesajul utilizatorului în chat și golim căsuța de input, apoi așteptăm răspunsul serverului. Când răspunsul vine (în câmpul data.response al JSON-ului), îl afișăm ca mesaj al botului. În caz de eroare, afișăm un mesaj de eroare.

O implementare similară folosind jQuery este prezentată de (GeeksforGeeks 2025). În exemplul lor, ei:

– Capturează evenimentul de submit al formularului, previn submit-ul normal (GeeksforGeeks 2025).

– Trimit cererea folosind $.ajax către „/” (ruta serverului, în cazul lor route-ul „/” acceptă POST și procesează promptul) (GeeksforGeeks 2025).

– La succes, inserează răspunsul (din data.response) în zona de chat, alături de mesajul utilizatorului deja inserat anterior.

Indiferent de metoda folosită (fetch sau AJAX), ideea centrală este că front-end-ul va comunica cu back-end-ul printr-un API REST simplu.

3. Afișarea și formatul mesajelor: Pentru a face conversația ușor de urmărit, putem stiliza mesajele utilizatorului și ale asistentului diferit (ex: aliniere la dreapta pentru utilizator și la stânga pentru bot, culori de fundal diferite, un mic avatar/icon etc.). De exemplu, în snippet-ul GfG se vede că au folosit pictograme (o iconiță de persoană pentru user și una de robot pentru bot) și culori verde vs. roșu (GeeksforGeeks 2025). Aceste detalii de UI se implementează în HTML/CSS – de exemplu, se pot folosi două clase CSS .message.user și .message.bot cu stiluri distincte.
4. Răspunsul serverului – format HTML vs JSON: Dacă dorim, putem face ca serverul să întoarcă direct HTML (fragment de cod pregătit) pe care front-end-ul să-l insereze. Dar o practică mai curată este să trimitem JSON (doar datele) și să lăsăm front-end-ul să insereze datele în DOM. În exemplul de mai sus, serverul returnează { „response”: „Textul răspunsului generat” }. Acest format este ușor de prelucrat în JavaScript.
5. Testarea locală: Puteți rula aplicația Flask (ex: cu flask run sau python app.py) sau aplicația FastAPI (uvicorn) local, apoi deschideți în browser pagina HTML (asigurându-vă că ruta este corectă, ex: http://localhost:5000/). Introduceți un mesaj și verificați că primiți răspuns de la chatbot. În modul debug, puteți vedea în consola serverului eventualele erori sau mesaje de print (inclusiv promptul trimis și răspunsul primit, dacă le afișați pentru debugging).

Figura 2: Flux de mesaje. Evidențiază invocarea API-ului cu context și răspunsul generat.

Utilizarea framework-urilor potrivite (Flask sau FastAPI pentru backend; HTML/CSS/JS pentru frontend)

Backend (Flask vs FastAPI): Atât Flask cât și FastAPI sunt opțiuni excelente pentru a implementa un serviciu web în Python:

• Flask este un micro-framework foarte ușor de folosit, potrivit pentru aplicații simple. Are o sintaxă minimalistă: definim rute cu decoratori (@app.route) și returnăm răspunsuri direct (string, dict ce devine JSON cu jsonify, sau render template). Flask nu vine cu prea multe de la sine, dar are extensii pentru aproape orice (de exemplu, flask-cors dacă vrem să permitem cereri cross-domain, flask-socketio pentru WebSocket etc.). În contextul nostru, Flask este suficient pentru a monta rapid un API REST. Exemplul anterior cu @app.route(‘/chat’) este bazat pe Flask.
• FastAPI este un framework modern, foarte performant (bazat pe ASGI/uvicorn, asyncio) și cu suport integrat pentru documentație OpenAPI. Un avantaj major este că, folosind tipuri Python și Pydantic, FastAPI generează automat un UI de documentație (Swagger) unde puteți testa API-urile vizual. FastAPI necesită un pic de atenție la definirea schema-urilor de date (folosind BaseModel pentru input/output), dar pentru un endpoint simplu cum e /chat puteți trata inputul ca pe un dict simplu. FastAPI arată puțin diferit – folosește un obiect app = FastAPI() și decoratori ca @app.post(„/chat”). Un exemplu de integrare ChatGPT cu FastAPI este oferit și pe Medium (Reddy 2023), subliniind că putem crea rapid endpoint-uri REST și să utilizăm puterea ChatGPT.

Alegerea framework-ului ține de preferințe și cerințe: dacă aveți nevoie de autentificare, de mai multe rute, de performanță și documentație automată, FastAPI e de dorit. Dacă doriți ceva extrem de rapid de scris și cu concept simplu, Flask e suficient. În ceea ce privește funcționalitatea de bază (a face cereri la OpenAI și a returna răspunsul), ambele se descurcă la fel de bine. Indiferent de framework, asigurați-vă că respectați bunele practici:

• Nu blocați thread-ul principal: în FastAPI, apelați OpenAI API folosind fie funcții async (dacă biblioteca openai oferă, altfel folosiți executori). În Flask, puteți apela sincron, dar fiți atenți la scalare (Flask, rulând pe un singur thread în modul built-in debug, va procesa cereri secvențial; pentru producție folosiți un server WSGI adevărat, ex: gunicorn).
• Setați corespunzător CORS (Cross-Origin Resource Sharing) dacă frontend-ul este servit de pe un alt domeniu/port decît backend-ul. De exemplu, dacă testați local front-end pe file:// sau pe un alt port, va fi nevoie să permiteți CORS pe ruta /chat pentru ca browserul să nu blocheze cererea.

Frontend (HTML/CSS/JS): Nu este nevoie de un framework frontend complex (precum React sau Angular) pentru un astfel de proiect simplu, deși le-ați putea folosi dacă doriți o integrare mai sofisticată. O pagină HTML statică, cu puțin JavaScript, este suficientă:

• Scrieți HTML semantic pentru structura paginii (un container pentru chat, un formular pentru input).
• Folosiți CSS (sau un framework CSS precum Bootstrap) pentru design responsiv și plăcut. Bootstrap, de exemplu, oferă componente predefinite pentru cards, buttons, forms, care vă pot ajuta să creați rapid o interfață aspectuoasă.
• JavaScript-ul poate fi vanilla (ES6+), sau puteți folosi o librărie mică (jQuery) pentru a simplifica AJAX și manipularea DOM. În exemplul anterior am arătat cod cu fetch, dar GfG a folosit jQuery – ambele sunt ok. Dacă sunteți mai confortabili cu fetch/promises, continuați cu acestea.

Servirea front-end-ului: Puteți servi fișierul HTML direct din Flask/FastAPI:

• În Flask, creați un template html și returnați render_template(„index.html”) la cereri GET pe rădăcină (/). Fișierele statice (CSS, JS separat dacă aveți) pot fi puse în folderul static/.
• În FastAPI, puteți fie să folosiți Jinja2Templates pentru a reda HTML, fie pur și simplu să aveți un fișier static. De exemplu, pentru simplitate, ați putea servi cu Starlette StaticFiles tot ce e în directorul frontend/ al proiectului.

În concluzie, stiva minimă este: HTML+CSS+JS pentru interfață și Flask/FastAPI (Python) pentru logică + apelul ChatGPT. Vă puteți concentra pe funcționalitate mai mult decât pe aspect; odată ce totul merge, ajustați interfața (adăugați un logo, culori brand, etc., dacă e un chatbot de firmă de exemplu).

Recomandări pentru optimizarea experienței utilizatorului

Pentru ca utilizatorii finali să aibă o experiență cât mai plăcută cu chatbot-ul, luați în considerare următoarele aspecte:

• Păstrarea contextului conversației (salvarea sesiunilor): Un chatbot de suport clienți e mult mai util dacă poate purta un dialog contextual, nu doar întrebări individuale. API-ul ChatGPT nu păstrează automat contextul între cereri, dar puteți implementa acest lucru la nivelul aplicației. Soluția este să stocați istoricul mesajelor într-o sesiune asociată utilizatorului și să îl retransmiteți la fiecare apel. De exemplu, puteți folosi un dicționar Python în backend care să mapeze un ID de sesiune la lista de mesaje. ID-ul de sesiune poate fi un cookie de sesiune (dacă aveți un sistem de autentificare sau puteți genera un random UUID la prima cerere și îl trimiteți ca cookie). În Flask, puteți folosi chiar obiectul session (care stochează date într-un cookie semnat) pentru a salva istoricul conversației simplu, atâta timp cât volumul de date nu e foarte mare. O altă opțiune este stocarea pe client (de exemplu, în localStorage) a ultimelor N mesaje și trimiterea lor împreună cu fiecare cerere. Totuși, a stoca istoricul în browser poate expune date potențial sensibile, așa că server-side e mai sigur.
  • Implementare exemplificativă: la fiecare POST la /chat, în loc să construiți messages=[…] de la zero, încărcați istoricul din sesiune, adăugați noul mesaj al utilizatorului (role „user”) la listă, trimiteți toată lista către OpenAI și apoi adăugați și răspunsul primit (role „assistant”) în lista din sesiune. Astfel, la următoarea întrebare a aceluiași utilizator, modelul va vedea și întrebările/răspunsurile anterioare și va răspunde contextual corect.
  • Limitarea istoricului: rețineți că modelele au o limită de tokeni (context window), așa că nu puteți crește conversația la nesfârșit. O abordare simplă este să țineți doar ultimele câteva interacțiuni (de exemplu, ultimele 10 mesaje din fiecare parte) sau să rezumați din când în când istoricul mai vechi, dacă e cazul.
  • Persistența pe termen lung: dacă doriți ca utilizatorii să revină mai târziu și să-și vadă vechile conversații, atunci trebuie stocat istoricul într-o bază de date (asociat eventual cu un cont de utilizator sau un identificator unic). Pentru un prototip însă, acest lucru poate fi exagerat – de obicei sesiunile expiră după un timp și conversația se resetează.
• Indicații de “typing” și feedback vizual: În interacțiunile umane, când cineva tastează un răspuns, știm că urmează să primim răspunsul. Pentru a reduce anxietatea utilizatorului în timpul în care așteaptă un răspuns de la API (care poate dura câteva secunde), puteți adăuga un indicator de tip „Assistant is typing…” sau un mic animație de încărcare (spinner). Acesta poate fi afișat imediat după trimiterea cererii și ascuns când primiți răspunsul. De exemplu, adăugați un element <div id=”loading” style=”display:none”>Botul scrie răspunsul…</div> și în JS, înainte de fetch, faceți style.display = ‘block’;, iar după ce vine răspunsul sau în caz de eroare, loading.style.display = ‘none’;.
• Timeout și tratarea întârzierilor: Uneori, apelul către OpenAI poate dura prea mult sau chiar să se blocheze din motive de rețea. Este bine să setați un timeout. Dacă folosiți biblioteca openai, puteți specifica parametrii request_timeout sau timeout în apel (verificați documentația actualizată – la un moment dat puteai face ChatCompletion.create(…, timeout=15) pentru 15 secunde). Dacă folosiți requests.post, puteți folosi requests.post(url, headers=headers, json=payload, timeout=15) (Codecademy 2025). Astfel, nu veți ține utilizatorul în așteptare mai mult de un anumit interval. Dacă timpul expiră, puteți retrimite cererea sau informa utilizatorul că sistemul e ocupat și să încerce din nou.
• Gestionarea erorilor și a scenariilor-limită: Asigurați-vă că acoperiți situațiile în care modelul ar putea eșua sau da un răspuns neadecvat:
  • Dacă API-ul returnează eroare (cod HTTP >= 400), afișați un mesaj prietenos („Ne pare rău, nu putem răspunde în acest moment. Încercați mai târziu.”). Poate logați eroarea pe server pentru debugging.
  • Dacă răspunsul modelului este gol sau nonsens, puteți decide să afișați un fallback („Nu am reușit să înțeleg întrebarea. Reformulați, vă rog.”) sau să trimiteți din nou promptul cu o ajustare.
  • Filtrarea conținutului: Pentru un chatbot public, trebuie să vă gândiți la filtrarea conținutului nepotrivit (profan, ofensator). OpenAI are un filtru de conținut integrat pentru modelele sale, dar nu este infailibil. Puteți adăuga propriile verificări pe mesajele utilizatorilor (de ex. să nu permită anumite injurii) și pe răspunsuri (dacă modelul totuși întoarce ceva nepotrivit, să îl cenzurați).
• Optimizarea costurilor și performanței: Fiecare întrebare către model costă timp și bani. Pentru a optimiza:
  • Puteți limita lungimea răspunsului (folosind max_tokens) atunci când știți că nu este necesar un răspuns foarte lung. De exemplu, la întrebări scurte de tip fact sau status comanda, nu e nevoie de eseuri.
  • Puteți scala modelul în funcție de nevoie: GPT-3.5-turbo este de obicei suficient pentru suport clienți general. Folosiți GPT-4 doar dacă e necesară calitatea superioară și acceptați costul și latența mai mari.
  • Cache la nivel de aplicație: Dacă observați întrebări repetate frecvent de către utilizatori diferiți (ex: „Care e programul de lucru?”), puteți implementa o memorie cache simplă (un dict in-memory sau un serviciu gen Redis) care să păstreze întrebarea -> răspunsul. Astfel, la întrebări identice, puteți servi instant din cache răspunsul, fără să mai apelați API-ul (economisind timp și cost) (Codecademy 2025). Atenție la cache însă: trebuie invalidat dacă informația devine învechită sau dacă răspunsurile trebuie personalizate per utilizator (în general pentru întrebări generice merge).
  • Mulți utilizatori simultan: Dacă prevedeți trafic mare, asigurați-vă că implementați limitare de rată (rate limiting) – atât pentru a nu depăși limitele API OpenAI, cât și pentru a preveni abuzul (ex: un user care trimite zeci de întrebări pe minut). De asemenea, pregătiți-vă infrastructura de backend să scaleze orizontal dacă e cazul (de ex., puteți rula mai multe procese/containere ale aplicației, și folosi un sistem de stat centralizat pentru sesiuni dacă e nevoie).
  • Streaming răspuns: OpenAI API suportă streaming – adică puteți primi porțiuni din răspuns pe măsură ce sunt generate (asemănător cum vedeți în UI-ul ChatGPT că apar treptat cuvintele). Implementarea streaming-ului implică folosirea de Server-Sent Events (SSE) sau WebSocket-uri către client. E mai complex, dar dacă doriți un efect de „typing” real pentru bot, merită explorat. Altfel, un compromis este indicatorul de încărcare menționat mai sus.

Rezumând, accentul trebuie pus pe responsivitate și fiabilitate: utilizatorul ar trebui să obțină răspunsuri relativ rapid, conversația să curgă natural (context menținut) și aplicația să fie robustă la probleme. Testați cu diverse întrebări (inclusiv întrebări greșite sau off-topic) ca să vedeți cum se comportă chatbot-ul, și ajustați promptul de sistem dacă e cazul pentru a-i modela comportamentul (de exemplu, instruiți-l să fie concis sau să ceară clarificări dacă întrebarea e neclară).

Referințe utile

• Documentația oficială OpenAI API – Chat Completions: Ghidul oficial pentru utilizarea API-ului de completare în regim chat (ChatGPT) al OpenAI, incluzând exemple de solicitări și parametri. Disponibil pe platforma OpenAI la secțiunea API Reference. (Codecademy 2025)
• OpenAI API Quickstart (Python) – Tutorial OpenAI: Un exemplu pas-cu-pas oferit de OpenAI pentru a construi o mică aplicație web care folosește Flask și OpenAI API (un “pet name generator”). Codul sursă este pe GitHub și demonstrează bune practici de structurare a proiectului. (Căutați repository-ul openai-quickstart-python pe GitHub) (Dan 2024).
• Biblioteca OpenAI Python – openai/openai-python: Pachetul oficial Python pentru OpenAI (disponibil pe PyPI și GitHub). Conține documentație despre funcțiile disponibile (ex: ChatCompletion.create) și modul de instalare.
• Documentația Flask: Pagina oficială Flask (în special secțiunea Quickstart) oferă informații despre definirea de rute, folosirea template-urilor și deployment. Este utilă pentru a înțelege cum să structurezi o aplicație web Python minimalistă.
• Documentația FastAPI: Site-ul oficial FastAPI conține tutoriale despre crearea de API-uri, definirea de modele Pydantic și modul de rulare. Include și ghid pentru deployment (Uvicorn/Gunicorn) și despre generarea automată a documentației interactive (OpenAPI/Swagger UI).
• Tutoriale și articole suplimentare:
  • Articolul Implement ChatGPT in a Flask Application – GeeksforGeeks (apr. 2025) descrie construirea unei aplicații Flask cu ChatGPT, incluzând cod de front-end și back-end (GeeksforGeeks 2025).
  • Postarea How to Set Up the OpenAI API with Python and Flask – Dev.to (2024) oferă un exemplu concret de aplicație Flask simplă integrată cu ChatGPT, folosind un prompt de sistem creativ și formular web (Dan 2024).
  • Beginner’s Guide to FastAPI & OpenAI ChatGPT API Integration – (2023, Medium) pentru cei interesați de implementarea echivalentă cu FastAPI, cu accent pe crearea de endpoint-uri RESTful și folosirea Swagger UI (Reddy 2023).
  • OpenAI Community & FAQ: Secțiunea de întrebări frecvente a OpenAI și forumul developerilor pot fi utile pentru probleme tehnice specifice (ex: erori de depășire context, rate-limits, bune practici de prompt design).

Acest ghid ar trebui să vă ofere o bază solidă pentru a dezvolta un chatbot de customer service cu ChatGPT. Urmând pașii de mai sus și consultând resursele indicate, veți putea construi și lansa rapid un prototip funcțional. Succes în implementare și nu uitați să testați riguros chatbot-ul, astfel încât să ofere răspunsuri corecte și să îmbunătățească cu adevărat experiența utilizatorilor voștri! (Loo 2023) (GeeksforGeeks 2025)

Bibliografie

• Codecademy. 2025. „How to Create and Use an OpenAI ChatGPT API Key”. Codecademy. 2025. https://www.codecademy.com/article/creating-an-openai-api-key.
• Dan. 2024. „How to Set Up the OpenAI API with Python and Flask”. DEV Community. 28 februarie 2024. https://dev.to/dcs-ink/how-to-set-up-the-openai-api-with-python-and-flask-2120.
• GeeksforGeeks. 2025. „Implement ChatGPT in a Flask Application”. GeeksforGeeks. 2025. https://www.geeksforgeeks.org/python/implement-chatgpt-in-a-flask-application/.
• Loo, Josephine. 2023. „The Beginner’s Guide to Using ChatGPT API in Python (4 Code Examples)”. 20 decembrie 2023. https://www.roborabbit.com/blog/using-chatgpt-api-in-python-5-examples/.
• Reddy, Yashwanth. 2023. „Beginner’s Guide to FastAPI & OpenAI ChatGPT API Integration”. Medium (blog). 28 august 2023. https://medium.com/@reddyyashu20/beginners-guide-to-fastapi-openai-chatgpt-api-integration-50a0c3b8571e.

Articol cu Acces Deschis (Open Access) distribuit în conformitate cu termenii licenței de atribuire Creative Commons CC BY SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/).