localizeflow[bot]
ef5f52240c
|
1 month ago | |
|---|---|---|
| .. | ||
| solution | 4 months ago | |
| README.md | 1 month ago | |
README.md
Δημιουργήστε έναν Βοηθό Συνομιλίας με AI
Θυμάστε στο Star Trek όταν το πλήρωμα συζητούσε άνετα με τον υπολογιστή του διαστημοπλοίου, κάνοντάς του σύνθετες ερωτήσεις και λαμβάνοντας στοχαστικές απαντήσεις; Αυτό που φαινόταν ως καθαρή επιστημονική φαντασία τη δεκαετία του 1960 είναι τώρα κάτι που μπορείτε να δημιουργήσετε χρησιμοποιώντας τεχνολογίες web που ήδη γνωρίζετε.
Σε αυτό το μάθημα, θα δημιουργήσουμε έναν βοηθό συνομιλίας AI χρησιμοποιώντας HTML, CSS, JavaScript και κάποια ολοκλήρωση με το backend. Θα ανακαλύψετε πώς οι ίδιες δεξιότητες που έχετε μάθει μπορούν να συνδεθούν με ισχυρές υπηρεσίες AI που κατανοούν το πλαίσιο και δημιουργούν ουσιαστικές απαντήσεις.
Σκεφτείτε το AI σαν να έχετε πρόσβαση σε μια τεράστια βιβλιοθήκη που όχι μόνο μπορεί να βρει πληροφορίες αλλά και να τις συνθέσει σε συνεκτικές απαντήσεις προσαρμοσμένες στις συγκεκριμένες ερωτήσεις σας. Αντί να ψάχνετε μέσα σε χιλιάδες σελίδες, λαμβάνετε άμεσες, συμφραζόμενες απαντήσεις.
Η ολοκλήρωση συμβαίνει μέσα από γνωστές τεχνολογίες web που συνεργάζονται. Το HTML δημιουργεί το περιβάλλον συνομιλίας, το CSS χειρίζεται τον οπτικό σχεδιασμό, το JavaScript διαχειρίζεται τις αλληλεπιδράσεις των χρηστών και ένα backend API συνδέει όλα με τις υπηρεσίες AI. Είναι παρόμοιο με το πώς διαφορετικά τμήματα μιας ορχήστρας συνεργάζονται για να δημιουργήσουν μια συμφωνία.
Ουσιαστικά, χτίζουμε μια γέφυρα μεταξύ της φυσικής ανθρώπινης επικοινωνίας και της επεξεργασίας μηχανής. Θα μάθετε τόσο την τεχνική υλοποίηση της ολοκλήρωσης των υπηρεσιών AI όσο και τα σχέδια σχεδίασης που κάνουν τις αλληλεπιδράσεις να φαίνονται διαισθητικές.
Στο τέλος αυτού του μαθήματος, η ολοκλήρωση AI θα σας φανεί λιγότερο σαν ένα μυστηριώδες διαδικασία και περισσότερο σαν ένα ακόμη API με το οποίο μπορείτε να δουλέψετε. Θα κατανοήσετε τα βασικά πρότυπα που τροφοδοτούν εφαρμογές όπως το ChatGPT και το Claude, χρησιμοποιώντας τις ίδιες αρχές ανάπτυξης web που έχετε μάθει.
⚡ Τι Μπορείτε να Κάνετε στα Επόμενα 5 Λεπτά
Γρήγορος Οδηγός Εκκίνησης για Απασχολημένους Προγραμματιστές
flowchart LR
A[⚡ 5 λεπτά] --> B[Λήψη διακριτικού GitHub]
B --> C[Δοκιμή παιδικής χαράς AI]
C --> D[Αντιγραφή κώδικα Python]
D --> E[Προβολή απαντήσεων AI]
- Λεπτό 1: Επισκεφτείτε το GitHub Models Playground και δημιουργήστε ένα προσωπικό access token
- Λεπτό 2: Δοκιμάστε τις αλληλεπιδράσεις AI απευθείας στο περιβάλλον playground
- Λεπτό 3: Κάντε κλικ στην καρτέλα "Code" και αντιγράψτε το απόσπασμα Python
- Λεπτό 4: Εκτελέστε τον κώδικα τοπικά με το token σας:
GITHUB_TOKEN=your_token python test.py - Λεπτό 5: Δείτε την πρώτη σας απάντηση AI να δημιουργείται από τον δικό σας κώδικα
Γρήγορος Κώδικας Δοκιμής:
import os
from openai import OpenAI
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key="your_token_here"
)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Hello AI!"}],
model="openai/gpt-4o-mini"
)
print(response.choices[0].message.content)
Γιατί Έχει Σημασία: Σε 5 λεπτά, θα ζήσετε τη μαγεία της προγραμματισμένης αλληλεπίδρασης με AI. Αυτό αντιπροσωπεύει το θεμελιώδες δομικό στοιχείο που τροφοδοτεί κάθε εφαρμογή AI που χρησιμοποιείτε.
Δείτε πώς θα μοιάζει το τελικό σας έργο:
🗺️ Το Ταξίδι Μάθησής σας Μέσα από την Ανάπτυξη Εφαρμογών AI
journey
title Από την Ανάπτυξη Ιστού στην Ενσωμάτωση AI
section Κατανόηση Θεμελίων AI
Ανακαλύψτε τις έννοιες του γενετικού AI: 4: You
Εξερευνήστε την πλατφόρμα GitHub Models: 6: You
Εξοικειωθείτε με παραμέτρους και εντολές AI: 8: You
section Ενσωμάτωση Backend
Δημιουργήστε διακομιστή API Python: 5: You
Υλοποιήστε κλήσεις λειτουργιών AI: 7: You
Διαχειριστείτε ασύγχρονες λειτουργίες: 8: You
section Ανάπτυξη Frontend
Δημιουργήστε σύγχρονη διεπαφή συνομιλίας: 6: You
Εξοικειωθείτε με αλληλεπιδράσεις σε πραγματικό χρόνο: 8: You
Δημιουργήστε ανταποκριτική εμπειρία χρήστη: 9: You
section Επαγγελματική Εφαρμογή
Αναπτύξτε ολοκληρωμένο σύστημα AI: 7: You
Βελτιστοποιήστε πρότυπα απόδοσης: 8: You
Δημιουργήστε εφαρμογή έτοιμη για παραγωγή: 9: You
Ο Προορισμός του Ταξιδιού σας: Στο τέλος αυτού του μαθήματος, θα έχετε δημιουργήσει μια πλήρη εφαρμογή με ισχύ AI χρησιμοποιώντας τις ίδιες τεχνολογίες και πρότυπα που χρησιμοποιούν σύγχρονοι βοηθοί AI όπως το ChatGPT, το Claude και το Google Bard.
Κατανόηση του AI: Από το Μυστήριο στην Κα_master_ία
Πριν βουτήξουμε στον κώδικα, ας καταλάβουμε με τι δουλεύουμε. Αν έχετε χρησιμοποιήσει APIs πριν, ξέρετε το βασικό πρότυπο: στέλνεις ένα αίτημα, λαμβάνεις μια απάντηση.
Τα AI APIs ακολουθούν παρόμοια δομή, αλλά αντί να ανακτούν προ-αποθηκευμένα δεδομένα από μια βάση δεδομένων, παράγουν νέες απαντήσεις βασισμένες σε πρότυπα που έμαθαν από τεράστιες ποσότητες κειμένων. Σκεφτείτε το σαν τη διαφορά ανάμεσα σε ένα σύστημα καταλόγου βιβλιοθήκης και έναν γνώστη βιβλιοθηκάριο που μπορεί να συνθέσει πληροφορίες από πολλαπλές πηγές.
Τι Είναι Πραγματικά το "Γενετικό AI";
Σκεφτείτε πώς η Ροζέτα πέτρα επέτρεψε στους μελετητές να κατανοήσουν τα αιγυπτιακά ιερογλυφικά βρίσκοντας πρότυπα ανάμεσα σε γνωστές και άγνωστες γλώσσες. Τα μοντέλα AI λειτουργούν παρόμοια – βρίσκουν πρότυπα σε τεράστιες ποσότητες κειμένου για να καταλάβουν πώς λειτουργεί η γλώσσα, και στη συνέχεια χρησιμοποιούν αυτά τα πρότυπα για να δημιουργήσουν κατάλληλες απαντήσεις σε νέες ερωτήσεις.
Ας το αναλύσουμε με μια απλή σύγκριση:
- Παραδοσιακή βάση δεδομένων: Σαν να ζητάτε το πιστοποιητικό γέννησής σας – παίρνετε ακριβώς το ίδιο έγγραφο κάθε φορά
- Μηχανή αναζήτησης: Σαν να ζητάτε από έναν βιβλιοθηκάριο να βρει βιβλία για γάτες – σας δείχνει τι είναι διαθέσιμο
- Γενετικό AI: Σαν να ρωτάτε έναν γνώστη φίλο για τις γάτες – σας λέει ενδιαφέροντα πράγματα με δικά του λόγια, προσαρμοσμένα σε ό,τι θέλετε να μάθετε
graph LR
A[Η Ερώτησή Σας] --> B[Μοντέλο ΤΝ]
B --> C[Αναγνώριση Προτύπων]
C --> D[Δημιουργία Περιεχομένου]
D --> E[Αντίδραση σε Πλαίσιο]
F[Δεδομένα Εκπαίδευσης<br/>Βιβλία, Άρθρα, Ιστός] --> B
Πώς Μάθαινουν τα Μοντέλα AI (Η Απλή Έκδοση)
Τα μοντέλα AI μαθαίνουν μέσα από έκθεση σε τεράστια σύνολα δεδομένων που περιέχουν κείμενα από βιβλία, άρθρα και συνομιλίες. Μέσα από αυτή τη διαδικασία, εντοπίζουν πρότυπα σε:
- Πώς είναι δομημένες οι σκέψεις στην γραπτή επικοινωνία
- Ποια λέξη εμφανίζονται συνήθως μαζί
- Πώς κυλάει συνήθως η συνομιλία
- Συμφραζόμενες διαφορές ανάμεσα σε επίσημη και ανεπίσημη επικοινωνία
Είναι παρόμοιο με το πώς οι αρχαιολόγοι αποκωδικοποιούν αρχαίες γλώσσες: αναλύουν χιλιάδες παραδείγματα για να κατανοήσουν γραμματική, λεξιλόγιο και πολιτισμικό πλαίσιο, και τελικά μπορούν να ερμηνεύουν νέα κείμενα χρησιμοποιώντας αυτά τα μάθημα πρότυπα.
Γιατί GitHub Models;
Χρησιμοποιούμε το GitHub Models για έναν αρκετά πρακτικό λόγο – μας δίνει πρόσβαση σε επίπεδο enterprise AI χωρίς να χρειαστεί να στήσουμε τη δική μας υποδομή AI (που, εμπιστευθείτε με, δεν θέλετε να κάνετε τώρα!). Σκεφτείτε το σαν να χρησιμοποιείτε ένα API καιρού αντί να προσπαθείτε να προβλέψετε τον καιρό μόνοι σας στήνοντας μετεωρολογικούς σταθμούς παντού.
Είναι ουσιαστικά "AI-ως-Υπηρεσία", και το καλύτερο; Είναι δωρεάν για να ξεκινήσετε, έτσι μπορείτε να πειραματιστείτε χωρίς να ανησυχείτε για υπέρογκους λογαριασμούς.
graph LR
A[Διεπαφή Συνομιλίας Frontend] --> B[Το Backend API σας]
B --> C[GitHub Models API]
C --> D[Επεξεργασία Μοντέλου ΤΝ]
D --> C
C --> B
B --> A
Θα χρησιμοποιήσουμε το GitHub Models για την ολοκλήρωση backend μας, που παρέχει πρόσβαση σε επαγγελματικής ποιότητας δυνατότητες AI μέσω ενός φιλικού προς τον προγραμματιστή περιβάλλοντος. Το GitHub Models Playground χρησιμεύει ως περιβάλλον δοκιμών όπου μπορείτε να πειραματιστείτε με διαφορετικά μοντέλα AI και να κατανοήσετε τις δυνατότητές τους πριν τα εφαρμόσετε στον κώδικα.
🧠 Οικοσύστημα Ανάπτυξης Εφαρμογών AI
mindmap
root((Ανάπτυξη Τεχνητής Νοημοσύνης))
Understanding AI
Generative Models
Αναγνώριση Προτύπων
Δημιουργία Περιεχομένου
Κατανόηση Πλαισίου
Σύνθεση Απαντήσεων
AI Parameters
Έλεγχος Θερμοκρασίας
Όρια Token
Φιλτράρισμα Top-p
Εντολές Συστήματος
Backend Architecture
API Integration
Μοντέλα GitHub
Πιστοποίηση
Διαχείριση Αιτήσεων
Διαχείριση Σφαλμάτων
Python Infrastructure
Πλαίσιο FastAPI
Ασύγχρονες Ενέργειες
Ασφάλεια Περιβάλλοντος
Διαμόρφωση CORS
Frontend Experience
Chat Interface
Ενημερώσεις σε Πραγματικό Χρόνο
Ιστορικό Μηνυμάτων
Ανατροφοδότηση Χρήστη
Καταστάσεις Φόρτωσης
Modern Web Tech
Κλάσεις ES6
Async/Await
Διαχείριση DOM
Διαχείριση Γεγονότων
Professional Patterns
Security Best Practices
Διαχείριση Token
Επικύρωση Εισόδου
Πρόληψη XSS
Όρια Σφαλμάτων
Production Readiness
Βελτιστοποίηση Απόδοσης
Ανταποκρινόμενος Σχεδιασμός
Προσβασιμότητα
Στρατηγικές Δοκιμών
Κεντρική Αρχή: Η ανάπτυξη εφαρμογών AI συνδυάζει τις παραδοσιακές δεξιότητες ανάπτυξης web με την ολοκλήρωση υπηρεσιών AI, δημιουργώντας έξυπνες εφαρμογές που φαίνονται φυσικές και ανταποκρίνονται στους χρήστες.
Τι κάνει το playground τόσο χρήσιμο:
- Δοκιμάστε διαφορετικά μοντέλα AI όπως GPT-4o-mini, Claude και άλλα (όλα δωρεάν!)
- Ελέγξτε τις ιδέες και τις προτροπές σας πριν γράψετε κώδικα
- Πάρτε έτοιμα αποσπάσματα κώδικα στη γλώσσα προγραμματισμού που προτιμάτε
- Ρυθμίστε επιλογές όπως το επίπεδο δημιουργικότητας και το μήκος της απάντησης για να δείτε πώς επηρεάζουν την έξοδο
Μόλις παίξετε λίγο, απλώς επιλέξτε την καρτέλα "Code" και διαλέξτε τη γλώσσα προγραμματισμού σας για να πάρετε τον κώδικα υλοποίησης που χρειάζεστε.
Ρύθμιση της Ολοκλήρωσης Backend με Python
Τώρα ας υλοποιήσουμε το AI μέσω Python. Η Python είναι εξαιρετική για εφαρμογές AI λόγω της απλής σύνταξης και των ισχυρών βιβλιοθηκών της. Θα ξεκινήσουμε με τον κώδικα από το GitHub Models playground και μετά θα τον αναδιαρθρώσουμε σε μια επαναχρησιμοποιήσιμη, έτοιμη για παραγωγή συνάρτηση.
Κατανόηση της Βασικής Υλοποίησης
Όταν πάρετε τον Python κώδικα από το playground, θα δείτε κάτι που μοιάζει με αυτό. Μην ανησυχείτε αν φαίνεται πολύ στην αρχή – ας το δούμε βήμα προς βήμα:
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# Για να αυθεντικοποιηθείτε με το μοντέλο, θα πρέπει να δημιουργήσετε ένα προσωπικό διακριτικό πρόσβασης (PAT) στις ρυθμίσεις του GitHub σας.
# Δημιουργήστε το PAT σας ακολουθώντας τις οδηγίες εδώ: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
Τι συμβαίνει σε αυτόν τον κώδικα:
- Εισάγουμε τα εργαλεία που χρειαζόμαστε:
osγια ανάγνωση μεταβλητών περιβάλλοντος καιOpenAIγια συνομιλία με το AI - Ρυθμίζουμε τον πελάτη OpenAI να δείχνει στους AI servers του GitHub αντί για τους OpenAI απευθείας
- Επαληθεύουμε με ένα ειδικό GitHub token (περισσότερα σε λίγο!)
- Δομούμε τη συνομιλία μας με διαφορετικούς "ρόλους" – σκεφτείτε το σαν το στήσιμο του σκηνικού για μια παράσταση
- Στέλνουμε το αίτημά μας στο AI με κάποιες παραμέτρους fine-tuning
- Εξάγουμε το πραγματικό κείμενο της απάντησης από όλα τα δεδομένα που επιστρέφονται
Κατανόηση των Ρόλων Μηνυμάτων: Το Πλαίσιο Συνομιλίας AI
Οι συνομιλίες AI χρησιμοποιούν μια συγκεκριμένη δομή με διαφορετικούς "ρόλους" που εξυπηρετούν διακριτούς σκοπούς:
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
Σκεφτείτε το σαν να σκηνοθετείτε μια παράσταση:
- Ρόλος συστήματος: Σαν οδηγίες σκηνής για έναν ηθοποιό – λέει στο AI πώς να συμπεριφέρεται, τι προσωπικότητα να έχει και πώς να απαντά
- Ρόλος χρήστη: Η πραγματική ερώτηση ή μήνυμα από τον χρήστη της εφαρμογής σας
- Ρόλος βοηθού: Η απάντηση του AI (δεν την στέλνετε εσείς, αλλά εμφανίζεται στο ιστορικό συνομιλίας)
Παραδειγματική αναλογία: Φανταστείτε ότι συστήνετε έναν φίλο σε κάποιον σε ένα πάρτι:
- Μήνυμα συστήματος: "Αυτή είναι η φίλη μου η Σάρα, είναι γιατρός που εξηγεί ιατρικά θέματα με απλούς όρους"
- Μήνυμα χρήστη: "Μπορείς να εξηγήσεις πώς λειτουργούν τα εμβόλια;"
- Απάντηση βοηθού: Η Σάρα απαντά σαν φιλικός γιατρός, όχι σαν δικηγόρος ή σεφ
Κατανόηση των Παραμέτρων AI: Ρύθμιση της Συμπεριφοράς Απαντήσεων
Οι αριθμητικές παράμετροι στις κλήσεις API AI ελέγχουν πώς το μοντέλο παράγει απαντήσεις. Αυτές οι ρυθμίσεις σας επιτρέπουν να προσαρμόσετε τη συμπεριφορά του AI για διαφορετικές χρήσεις:
Θερμοκρασία (0.0 έως 2.0): Ο Δρομολογητής Δημιουργικότητας
Τι κάνει: Ελέγχει πόσο δημιουργικές ή προβλέψιμες θα είναι οι απαντήσεις του AI.
Σκεφτείτε το σαν το επίπεδο αυτοσχεδιασμού ενός μουσικού τζαζ:
- Θερμοκρασία = 0.1: Παίζει την ίδια μελωδία κάθε φορά (πολύ προβλέψιμο)
- Θερμοκρασία = 0.7: Προσθέτει κάποιες γευστικές παραλλαγές ενώ παραμένει αναγνωρίσιμο (ισορροπημένη δημιουργικότητα)
- Θερμοκρασία = 1.5: Πλήρης πειραματικός τζαζ με απρόβλεπτες στροφές (πολύ απρόβλεπτο)
# Πολύ προβλέψιμες απαντήσεις (καλές για ερωτήσεις με πραγματικά δεδομένα)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Σχεδόν πάντα θα λέει "4"
)
# Δημιουργικές απαντήσεις (καλές για καταιγισμό ιδεών)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Θα δημιουργήσει μοναδικές, απρόβλεπτες ιστορίες
)
Μέγιστοι Κωδικοί (1 έως 4096+): Ο Ελεγκτής Μήκους Απάντησης
Τι κάνει: Ορίζει ένα όριο στο πόσο μεγάλη μπορεί να είναι η απάντηση του AI.
Σκεφτείτε τους κωδικούς ως περίπου ισοδύναμους με λέξεις (περίπου 1 κωδικός = 0.75 λέξεις στα αγγλικά):
- max_tokens=50: Σύντομο και γλυκό (σαν ένα μήνυμα κειμένου)
- max_tokens=500: Μια ωραία παράγραφος ή δύο
- max_tokens=2000: Μια λεπτομερής εξήγηση με παραδείγματα
# Σύντομες, περιεκτικές απαντήσεις
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Επιβάλλει σύντομη εξήγηση
)
# Λεπτομερείς, ολοκληρωμένες απαντήσεις
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Επιτρέπει λεπτομερείς εξηγήσεις με παραδείγματα
)
Top_p (0.0 έως 1.0): Η Παράμετρος Εστίασης
Τι κάνει: Ελέγχει πόσο εστιασμένο μένει το AI στις πιο πιθανές απαντήσεις.
Φανταστείτε το AI να έχει ένα τεράστιο λεξιλόγιο, ταξινομημένο με βάση το πόσο πιθανή είναι κάθε λέξη:
- top_p=0.1: Λαμβάνει υπόψη μόνο το κορυφαίο 10% των πιο πιθανών λέξεων (πολύ εστιασμένο)
- top_p=0.9: Λαμβάνει υπόψη το 90% των πιθανών λέξεων (περισσότερη δημιουργικότητα)
- top_p=1.0: Λαμβάνει υπόψη τα πάντα (μέγιστη ποικιλία)
Για παράδειγμα: Αν ρωτήσετε "Ο ουρανός συνήθως είναι..."
- Χαμηλό top_p: Πιθανότατα θα πει "γαλάζιος"
- Υψηλό top_p: Μπορεί να πει "γαλάζιος", "συννεφιασμένος", "τεράστιος", "μεταβαλλόμενος", "όμορφος" κλπ.
Συνδυάζοντας Όλα: Συνδυασμοί Παραμέτρων για Διάφορες Χρήσεις
# Για ακριβείς, συνεπείς απαντήσεις (όπως ένας bot τεκμηρίωσης)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# Για βοήθεια στη δημιουργική γραφή
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# Για συνομιλητικές, βοηθητικές απαντήσεις (ισορροπημένες)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
quadrantChart
title Πίνακας Βελτιστοποίησης Παραμέτρων ΤΝ
x-axis Χαμηλή Δημιουργικότητα --> Υψηλή Δημιουργικότητα
y-axis Σύντομη Απόκριση --> Μακρά Απόκριση
quadrant-1 Δημιουργικό Περιεχόμενο
quadrant-2 Λεπτομερής Ανάλυση
quadrant-3 Γρήγορα Στοιχεία
quadrant-4 Συνομιλητική ΤΝ
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
Κατανόηση γιατί αυτές οι παράμετροι έχουν σημασία: Διάφορες εφαρμογές χρειάζονται διαφορετικού τύπου απαντήσεις. Ένα bot εξυπηρέτησης πελατών πρέπει να είναι συνεπές και τεκμηριωμένο (χαμηλή θερμοκρασία), ενώ ένας βοηθός δημιουργικής γραφής πρέπει να είναι φανταστικός και ποικίλος (υψηλή θερμοκρασία). Η κατανόηση αυτών των παραμέτρων σας δίνει έλεγχο στην προσωπικότητα και το στυλ απάντησης του AI σας.
**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
### Creating a Reusable AI Function
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
```python
import asyncio
from openai import AsyncOpenAI
# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
"""
Sends a prompt to the AI model asynchronously and returns the response.
Args:
prompt: The user's question or message
system_message: Instructions that define the AI's behavior and personality
Returns:
str: The AI's response to the prompt
"""
try:
response = await client.chat.completions.create(
messages=[
{
"role": "system",
"content": system_message,
},
{
"role": "user",
"content": prompt,
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
return response.choices[0].message.content
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return "I'm sorry, I'm having trouble processing your request right now."
# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
"""Synchronous wrapper for async AI calls."""
return asyncio.run(call_llm_async(prompt, system_message))
Κατανόηση αυτής της βελτιωμένης συνάρτησης:
- Αποδέχεται δύο παραμέτρους: την προτροπή του χρήστη και ένα προαιρετικό μήνυμα συστήματος
- Παρέχει ένα προεπιλεγμένο μήνυμα συστήματος για γενική συμπεριφορά βοηθού
- Χρησιμοποιεί κατάλληλα τύπους Python για καλύτερη τεκμηρίωση κώδικα
- Περιλαμβάνει λεπτομερή docstring που εξηγεί τον σκοπό και τις παραμέτρους της συνάρτησης
- Επιστρέφει μόνο το περιεχόμενο της απάντησης, καθιστώντας την εύκολη στη χρήση στο web API μας
- Διατηρεί τις ίδιες παραμέτρους μοντέλου για συνεπή συμπεριφορά AI
Η Μαγεία των System Prompts: Προγραμματισμός Προσωπικότητας AI
Αν οι παράμετροι ελέγχουν πώς "σκέφτεται" το AI, τα system prompts ελέγχουν ποιος νομίζει ότι είναι το AI. Αυτή είναι ειλικρινά μια από τις πιο συναρπαστικές πτυχές της εργασίας με AI – δίνετε στο AI μια ολοκληρωμένη προσωπικότητα, επίπεδο εξειδίκευσης και στυλ επικοινωνίας.
Σκεφτείτε τα system prompts σαν να κάνετε κάστινγκ διαφορετικών ηθοποιών για διαφορετικούς ρόλους: Αντί να έχετε έναν γενικό βοηθό, μπορείτε να δημιουργήσετε ειδικούς εμπειρογνώμονες για διαφορετικές καταστάσεις. Θέλετε έναν υπομονετικό δάσκαλο; Έναν δημιουργικό συνεργάτη ιδεών; Έναν σοβαρό επιχειρηματικό σύμβουλο; Απλά αλλάξτε το system prompt!
Γιατί τα System Prompts Είναι Τόσο Ισχυρά
Εδώ είναι το ενδιαφέρον: τα μοντέλα AI έχουν εκπαιδευτεί σε αμέτρητες συνομιλίες όπου οι άνθρωποι υιοθετούν διαφορετικούς ρόλους και επίπεδα εξειδίκευσης. Όταν δίνετε στο AI έναν συγκεκριμένο ρόλο, είναι σαν να ανάβετε έναν διακόπτη που ενεργοποιεί όλα αυτά τα μάθημα πρότυπα.
Είναι σαν method acting για AI: Πείτε σε έναν ηθοποιό "είσαι ένας σοφός γέρος καθηγητής" και δείτε πώς αλλάζει αυτόματα η στάση, το λεξιλόγιο και οι κινήσεις του. Το AI κάνει κάτι εξαιρετικά παρόμοιο με τα γλωσσικά πρότυπα.
Σύνταξη Αποτελεσματικών System Prompts: Η Τέχνη και η Επιστήμη
Η δομή ενός εξαιρετικού system prompt:
- Ρόλος / Ταυτότητα: Ποιος είναι το AI;
- Εξειδίκευση: Τι γνωρίζει;
- Στυλ επικοινωνίας: Πώς μιλάει;
- Συγκεκριμένες οδηγίες: Σε τι πρέπει να εστιάσει;
# ❌ Ασαφής προτροπή συστήματος
"You are helpful."
# ✅ Λεπτομερής, αποτελεσματική προτροπή συστήματος
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
Παραδείγματα System Prompts με Πλαίσιο
Ας δούμε πώς διαφορετικά system prompts δημιουργούν εντελώς διαφορετικές προσωπικότητες AI:
# Παράδειγμα 1: Ο Υπομονετικός Δάσκαλος
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students.
You break down complex concepts into simple steps, use analogies from everyday life,
and always check if the student understands before moving on. You're encouraging
and never make students feel bad for not knowing something.
"""
# Παράδειγμα 2: Ο Δημιουργικός Συνεργάτης
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're
enthusiastic, imaginative, and always build on the user's ideas rather than
replacing them. You ask thought-provoking questions to spark creativity and
offer unexpected perspectives that make stories more interesting.
"""
# Παράδειγμα 3: Ο Στρατηγικός Σύμβουλος Επιχειρήσεων
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience
helping startups scale. You think in frameworks, provide structured advice,
and always consider both short-term tactics and long-term strategy. You ask
probing questions to understand the full business context before giving advice.
"""
Βλέποντας τα System Prompts σε Δράση
Ας δοκιμάσουμε την ίδια ερώτηση με διαφορετικά system prompts για να δούμε τις δραματικές διαφορές:
Ερώτηση: "Πώς διαχειρίζομαι τον έλεγχο ταυτότητας χρήστη στην web εφαρμογή μου;"
# Με προτροπή του δασκάλου:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Τυπική απάντηση: "Υπέροχη ερώτηση! Ας χωρίσουμε την αυθεντικοποίηση σε απλά βήματα.
# Σκέψου το σαν έναν πορτιέρη νυχτερινού μαγαζιού που ελέγχει ταυτότητες..."
# Με προτροπή επιχείρησης:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Τυπική απάντηση: "Από στρατηγική άποψη, η αυθεντικοποίηση είναι κρίσιμη για την εμπιστοσύνη των χρηστών
# και τη συμμόρφωση με τους κανονισμούς. Ας περιγράψω ένα πλαίσιο λαμβάνοντας υπόψη την ασφάλεια,
# την εμπειρία χρήστη και την επεκτασιμότητα..."
Προχωρημένες Τεχνικές System Prompt
1. Ορισμός Πλαισίου: Δώστε στο AI πληροφορίες υποβάθρου
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
2. Μορφοποίηση Εξόδου: Πείτε στην AI πώς να δομήσει τις απαντήσεις
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
3. Ορισμός Περιορισμών: Ορίστε τι δεν πρέπει να κάνει η AI
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
Γιατί Αυτό Έχει Σημασία για τον Βοηθό Συνομιλίας σας
Η κατανόηση των συστημικών εντολών σας δίνει απίστευτη δύναμη να δημιουργήσετε εξειδικευμένους βοηθούς AI:
- Ρομπότ εξυπηρέτησης πελατών: Βοηθητικό, υπομονετικό, με επίγνωση πολιτικής
- Δάσκαλος μάθησης: Ενθαρρυντικός, βήμα προς βήμα, ελέγχει την κατανόηση
- Δημιουργικός συνεργάτης: Φανταστικός, χτίζει πάνω σε ιδέες, ρωτά “τι θα γινόταν αν;”
- Τεχνικός εμπειρογνώμονας: Ακριβής, λεπτομερής, με επίγνωση ασφάλειας
Το βασικό συμπέρασμα: Δεν καλείτε απλώς ένα API AI – δημιουργείτε μια εξατομικευμένη προσωπικότητα AI που εξυπηρετεί την συγκεκριμένη χρήση σας. Αυτό είναι που κάνει τις σύγχρονες εφαρμογές AI να είναι προσαρμοσμένες και χρήσιμες αντί για γενικές.
🎯 Παιδαγωγικός Έλεγχος: Προγραμματισμός Προσωπικότητας AI
Κάντε παύση και σκεφτείτε: Μόλις μάθατε να προγραμματίζετε προσωπικότητες AI μέσω συστημικών εντολών. Αυτή είναι μια θεμελιώδης δεξιότητα στην ανάπτυξη σύγχρονων εφαρμογών AI.
Γρήγορη αυτοαξιολόγηση:
- Μπορείτε να εξηγήσετε πώς διαφέρουν οι συστημικές εντολές από τα κανονικά μηνύματα χρήστη;
- Ποια είναι η διαφορά μεταξύ των παραμέτρων temperature και top_p;
- Πώς θα δημιουργούσατε μια συστημική εντολή για μια συγκεκριμένη χρήση (πχ δάσκαλος προγραμματισμού);
Σύνδεση με πραγματικό κόσμο: Οι τεχνικές συστημικών εντολών που μάθατε χρησιμοποιούνται σε κάθε σημαντική εφαρμογή AI – από τη βοήθεια κωδικοποίησης του GitHub Copilot έως τη διεπαφή συνομιλίας του ChatGPT. Μαθαίνετε τα ίδια πρότυπα που χρησιμοποιούν οι ομάδες προϊόντων AI σε μεγάλες τεχνολογικές εταιρείες.
Ερώτηση πρόκλησης: Πώς θα σχεδιάζατε διαφορετικές προσωπικότητες AI για διαφορετικούς τύπους χρηστών (αρχάριος vs ειδικός); Σκεφτείτε πώς το ίδιο μοντέλο AI μπορεί να εξυπηρετήσει διαφορετικά ακροατήρια μέσω της μηχανικής εντολών.
Δημιουργία του Web API με FastAPI: Το Κέντρο Υψηλής Απόδοσης Επικοινωνίας με AI
Τώρα ας φτιάξουμε το backend που συνδέει το frontend σας με τις υπηρεσίες AI. Θα χρησιμοποιήσουμε το FastAPI, ένα σύγχρονο πλαίσιο Python που διαπρέπει στη δημιουργία APIs για εφαρμογές AI.
Το FastAPI προσφέρει αρκετά πλεονεκτήματα για αυτό τον τύπο έργου: ενσωματωμένη υποστήριξη async για ταυτόχρονες αιτήσεις, αυτόματη δημιουργία τεκμηρίωσης API και εξαιρετική απόδοση. Ο διακομιστής FastAPI λειτουργεί ως ενδιάμεσος που λαμβάνει αιτήσεις από το frontend, επικοινωνεί με τις υπηρεσίες AI και επιστρέφει μορφοποιημένες απαντήσεις.
Γιατί FastAPI για Εφαρμογές AI;
Μπορεί να αναρωτιέστε: «Δεν μπορώ απλά να καλέσω την AI απευθείας από το JavaScript του frontend μου;» ή «Γιατί FastAPI αντί για Flask ή Django;» Εξαιρετικές ερωτήσεις!
Ιδού γιατί το FastAPI είναι ιδανικό για αυτό που χτίζουμε:
- Async από προεπιλογή: Μπορεί να διαχειρίζεται πολλαπλές αιτήσεις AI ταυτόχρονα χωρίς να κολλάει
- Αυτόματη τεκμηρίωση: Επισκεφτείτε το
/docsκαι δείτε όμορφη, διαδραστική τεκμηρίωση API δωρεάν - Ενσωματωμένη επικύρωση: Ανιχνεύει σφάλματα πριν προκαλέσουν προβλήματα
- Αστραπιαία ταχύτητα: Ένα από τα ταχύτερα πλαίσια Python εκεί έξω
- Σύγχρονο Python: Χρησιμοποιεί όλες τις πιο πρόσφατες και κορυφαίες δυνατότητες της Python
Και γιατί χρειαζόμαστε καθόλου backend:
Ασφάλεια: Το κλειδί του API AI είναι σαν κωδικός πρόσβασης – αν το βάλετε στο JavaScript του frontend, όποιος δει τον κώδικα της σελίδας σας μπορεί να το κλέψει και να χρησιμοποιήσει τα credits AI σας. Το backend κρατάει τα ευαίσθητα διαπιστευτήρια ασφαλή.
Περιορισμός Ρυθμού & Έλεγχος: Το backend σας επιτρέπει να ελέγχετε πόσες φορές οι χρήστες μπορούν να κάνουν αιτήσεις, να εφαρμόζετε πιστοποίηση χρήστη και να προσθέτετε καταγραφή για παρακολούθηση χρήσης.
Επεξεργασία Δεδομένων: Μπορεί να θέλετε να αποθηκεύετε συνομιλίες, να φιλτράρετε ακατάλληλο περιεχόμενο ή να συνδυάζετε πολλές υπηρεσίες AI. Το backend είναι το μέρος που ζει αυτή η λογική.
Η αρχιτεκτονική μοιάζει με μοντέλο πελάτη-διακομιστή:
- Frontend: Επίπεδο διεπαφής χρήστη για αλληλεπίδραση
- Backend API: Επίπεδο επεξεργασίας και δρομολόγησης αιτήσεων
- Υπηρεσία AI: Εξωτερικός υπολογισμός και παραγωγή απαντήσεων
- Μεταβλητές Περιβάλλοντος: Ασφαλής ρύθμιση και αποθήκευση διαπιστευτηρίων
Κατανόηση της Ροής Αίτησης-Απόκρισης
Ας ακολουθήσουμε τι συμβαίνει όταν ένας χρήστης στέλνει μήνυμα:
sequenceDiagram
participant User as 👤 Χρήστης
participant Frontend as 🌐 Εμπρόσθιο
participant API as 🔧 FastAPI Διακομιστής
participant AI as 🤖 Υπηρεσία AI
User->>Frontend: Πληκτρολογεί "Γειά σου AI!"
Frontend->>API: POST /hello {"message": "Γειά σου AI!"}
Note over API: Επικυρώνει το αίτημα<br/>Προσθέτει προτροπή συστήματος
API->>AI: Στέλνει μορφοποιημένο αίτημα
AI->>API: Επιστρέφει απάντηση AI
Note over API: Επεξεργάζεται την απάντηση<br/>Καταγράφει τη συνομιλία
API->>Frontend: {"response": "Γειά! Πώς μπορώ να βοηθήσω;"}
Frontend->>User: Εμφανίζει μήνυμα AI
Κατανόηση κάθε βήματος:
- Αλληλεπίδραση χρήστη: Ο χρήστης πληκτρολογεί στη διεπαφή συνομιλίας
- Επεξεργασία frontend: Το JavaScript καταγράφει την είσοδο και τη μορφοποιεί σε JSON
- Επικύρωση API: Το FastAPI επικυρώνει αυτόματα το αίτημα με χρήση μοντέλων Pydantic
- Ενσωμάτωση AI: Το backend προσθέτει το πλαίσιο (συστημική εντολή) και καλεί την υπηρεσία AI
- Διαχείριση απάντησης: Το API λαμβάνει απάντηση AI και την τροποποιεί εάν χρειάζεται
- Εμφάνιση frontend: Το JavaScript εμφανίζει την απάντηση στη διεπαφή συνομιλίας
Κατανόηση της Αρχιτεκτονικής API
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Γεια σου AI!"}
FastAPI->>AI Function: call_llm(message, system_prompt)
AI Function->>GitHub Models: API αίτηση
GitHub Models->>AI Function: απάντηση AI
AI Function->>FastAPI: κείμενο απάντησης
FastAPI->>Frontend: {"response": "Γεια! Πώς μπορώ να βοηθήσω;"}
flowchart TD
A[Είσοδος Χρήστη] --> B[Επικύρωση Frontend]
B --> C[HTTP POST Αίτημα]
C --> D[FastAPI Δρομολογητής]
D --> E[Επικύρωση Pydantic]
E --> F[Κλήση Λειτουργίας AI]
F --> G[GitHub Models API]
G --> H[Επεξεργασία Απόκρισης]
H --> I[Απόκριση JSON]
I --> J[Ενημέρωση Frontend]
subgraph "Επίπεδο Ασφαλείας"
K[Middleware CORS]
L[Μεταβλητές Περιβάλλοντος]
M[Διαχείριση Σφαλμάτων]
end
D --> K
F --> L
H --> M
Δημιουργία της Εφαρμογής FastAPI
Ας χτίσουμε το API βήμα-βήμα. Δημιουργήστε ένα αρχείο με όνομα api.py με τον ακόλουθο κώδικα FastAPI:
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Διαμόρφωση καταγραφής
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Δημιουργία εφαρμογής FastAPI
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Διαμόρφωση CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Διαμόρφωση κατάλληλη για παραγωγή
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Μοντέλα Pydantic για επικύρωση αιτήσεων/απαντήσεων
class ChatMessage(BaseModel):
message: str
class ChatResponse(BaseModel):
response: str
@app.get("/")
async def root():
"""Root endpoint providing API information."""
return {
"message": "Welcome to the AI Chat API",
"docs": "/docs",
"health": "/health"
}
@app.get("/health")
async def health_check():
"""Health check endpoint."""
return {"status": "healthy", "service": "ai-chat-api"}
@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
"""Main chat endpoint that processes messages and returns AI responses."""
try:
# Εξαγωγή και επικύρωση μηνύματος
message = chat_message.message.strip()
if not message:
raise HTTPException(status_code=400, detail="Message cannot be empty")
logger.info(f"Processing message: {message[:50]}...")
# Κλήση υπηρεσίας AI (σημείωση: το call_llm θα πρέπει να γίνει ασύγχρονο για καλύτερη απόδοση)
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
logger.info("AI response generated successfully")
return ChatResponse(response=ai_response)
except HTTPException:
raise
except Exception as e:
logger.error(f"Error processing chat message: {str(e)}")
raise HTTPException(status_code=500, detail="Internal server error")
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
Κατανόηση της υλοποίησης FastAPI:
- Εισαγωγές FastAPI για λειτουργικότητα σύγχρονου web framework και Pydantic για επικύρωση δεδομένων
- Δημιουργεί αυτόματη τεκμηρίωση API (διαθέσιμη στο
/docsόταν τρέχει ο διακομιστής) - Ενεργοποιεί CORS middleware για να επιτρέπει αιτήσεις frontend από διαφορετικές προελεύσεις
- Ορίζει μοντέλα Pydantic για αυτόματη επικύρωση αιτήσεων/απαντήσεων και τεκμηρίωση
- Χρησιμοποιεί ασύγχρονες τελικές σημεία για καλύτερη απόδοση με ταυτόχρονες αιτήσεις
- Υλοποιεί κατάλληλους κωδικούς κατάστασης HTTP και διαχείριση σφαλμάτων με HTTPException
- Περιλαμβάνει δομημένη καταγραφή για παρακολούθηση και αποσφαλμάτωση
- Παρέχει τελικό σημείο ελέγχου υγείας για παρακολούθηση κατάστασης υπηρεσίας
Κύρια πλεονεκτήματα FastAPI έναντι παραδοσιακών πλαισίων:
- Αυτόματη επικύρωση: Τα μοντέλα Pydantic εξασφαλίζουν την ακεραιότητα των δεδομένων πριν την επεξεργασία
- Διαδραστική τεκμηρίωση: Επισκεφτείτε
/docsγια αυτόματα παραγόμενη, δοκιμάσιμη τεκμηρίωση API - Ασφάλεια τύπων: Οι σημειώσεις τύπων Python αποτρέπουν σφάλματα χρόνου εκτέλεσης και βελτιώνουν την ποιότητα κώδικα
- Υποστήριξη async: Διαχειριστείτε πολλαπλές αιτήσεις AI ταυτόχρονα χωρίς μπλοκάρισμα
- Απόδοση: Σημαντικά γρηγορότερη επεξεργασία αιτήσεων για εφαρμογές πραγματικού χρόνου
Κατανόηση του CORS: Ο Φύλακας Ασφαλείας του Web
Το CORS (Cross-Origin Resource Sharing) είναι σαν τον φύλακα ασφαλείας σε ένα κτίριο που ελέγχει αν οι επισκέπτες έχουν δικαίωμα να μπουν. Ας κατανοήσουμε γιατί έχει σημασία και πώς επηρεάζει την εφαρμογή σας.
Τι είναι το CORS και γιατί υπάρχει;
Το πρόβλημα: Φανταστείτε αν οποιοσδήποτε ιστότοπος μπορούσε να κάνει αιτήσεις στην τράπεζά σας εξ ονόματός σας χωρίς την άδειά σας. Αυτό θα ήταν εφιάλτης ασφάλειας! Οι περιηγητές το αποτρέπουν αυτό από προεπιλογή μέσω της «Πολιτικής Ίδιας Προέλευσης».
Πολιτική Ίδιας Προέλευσης: Οι περιηγητές επιτρέπουν σε ιστοσελίδες να κάνουν αιτήσεις μόνο προς τον ίδιο τομέα, θύρα και πρωτόκολλο από όπου φορτώθηκαν.
Πραγματική αναλογία: Είναι σαν το κτίριο να έχει φύλακα – μόνο οι κάτοικοι (ίδια προέλευση) μπορούν να μπουν. Αν θέλετε να αφήσετε έναν φίλο (διαφορετική προέλευση) να επισκεφθεί, πρέπει να το πείτε ρητά στη φύλαξη.
Το CORS στο Περιβάλλον Ανάπτυξης σας
Κατά την ανάπτυξη, το frontend και το backend τρέχουν σε διαφορετικές θύρες:
- Frontend:
http://localhost:3000(ή file:// αν ανοίξετε απευθείας HTML) - Backend:
http://localhost:5000
Αυτά θεωρούνται «διαφορετικές προελεύσεις» ακόμη κι αν είναι στον ίδιο υπολογιστή!
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # Αυτό λέει στους περιηγητές: "Είναι εντάξει για άλλες προελεύσεις να κάνουν αιτήματα σε αυτό το API"
Τι κάνει η ρύθμιση CORS στην πράξη:
- Προσθέτει ειδικούς HTTP headers στις απαντήσεις API που λένε στους περιηγητές «η αίτηση από αυτή την προέλευση επιτρέπεται»
- Διαχειρίζεται αιτήσεις "προελέγχου" (οι περιηγητές ελέγχουν τα δικαιώματα πριν στείλουν την πραγματική αίτηση)
- Αποτρέπει το μισητό σφάλμα «απόρριψη από πολιτική CORS» στην κονσόλα του περιηγητή σας
Ασφάλεια CORS: Ανάπτυξη vs Παραγωγή
# 🚨 Ανάπτυξη: Επιτρέπει ΟΛΕΣ τις προελεύσεις (βολικό αλλά ανασφαλές)
CORS(app)
# ✅ Παραγωγή: Επιτρέπεται μόνο ο συγκεκριμένος τομέας frontend σας
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Προχωρημένο: Διαφορετικές προελεύσεις για διαφορετικά περιβάλλοντα
if app.debug: # Λειτουργία ανάπτυξης
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Λειτουργία παραγωγής
CORS(app, origins=["https://yourdomain.com"])
Γιατί αυτό έχει σημασία: Στην ανάπτυξη, το CORS(app) είναι σαν να αφήνετε την πόρτα του σπιτιού σας ξεκλείδωτη – βολικό αλλά όχι ασφαλές. Στην παραγωγή θέλετε να καθορίσετε ακριβώς ποιοι ιστότοποι μπορούν να μιλήσουν με το API σας.
Συνηθισμένα Σενάρια CORS και Λύσεις
| Σενάριο | Πρόβλημα | Λύση |
|---|---|---|
| Τοπική Ανάπτυξη | Το frontend δεν μπορεί να προσεγγίσει το backend | Προσθήκη CORSMiddleware στο FastAPI |
| GitHub Pages + Heroku | Το αναπτυγμένο frontend δεν φτάνει στο API | Προσθήκη της διεύθυνσης GitHub Pages στα origins του CORS |
| Προσαρμοσμένος Τομέας | Σφάλματα CORS στην παραγωγή | Ενημέρωση των origins του CORS για να ταιριάζουν στον τομέα σας |
| Κινητή Εφαρμογή | Η εφαρμογή δεν φτάνει στο Web API | Προσθήκη του domain της εφαρμογής σας ή προσεκτική χρήση του * |
Συμβουλή εμπειρογνώμονα: Μπορείτε να δείτε τους headers CORS στα Εργαλεία Ανάπτυξης του περιηγητή σας στην καρτέλα Δίκτυο. Ψάξτε για headers όπως Access-Control-Allow-Origin στην απάντηση.
Διαχείριση Σφαλμάτων και Επικύρωση
Παρατηρήστε πώς το API μας περιλαμβάνει σωστή διαχείριση σφαλμάτων:
# Επαληθεύστε ότι λάβαμε ένα μήνυμα
if not message:
return jsonify({"error": "Message field is required"}), 400
Κύρια αρχές επικύρωσης:
- Ελέγχει για απαραίτητα πεδία πριν επεξεργαστεί αιτήσεις
- Επιστρέφει κατανοητά μηνύματα σφάλματος σε μορφή JSON
- Χρησιμοποιεί κατάλληλους κωδικούς κατάστασης HTTP (400 για κακές αιτήσεις)
- Παρέχει σαφή ανατροφοδότηση για να βοηθήσει τους frontend προγραμματιστές να αποσφαλματώσουν
Ρύθμιση και Εκτέλεση του Backend σας
Τώρα που έχουμε την ενσωμάτωση AI και τον διακομιστή FastAPI έτοιμους, ας εκκινήσουμε τα πάντα. Η διαδικασία ρύθμισης περιλαμβάνει εγκατάσταση εξαρτήσεων Python, ρύθμιση μεταβλητών περιβάλλοντος και εκκίνηση του server ανάπτυξης σας.
Ρύθμιση Περιβάλλοντος Python
Ας στήσουμε το περιβάλλον ανάπτυξης Python σας. Τα εικονικά περιβάλλοντα είναι σαν τη διαμερισματοποίηση του Manhattan Project – κάθε έργο αποκτά το δικό του απομονωμένο χώρο με συγκεκριμένα εργαλεία και εξαρτήσεις, αποφεύγοντας συγκρούσεις μεταξύ διαφορετικών έργων.
# Μεταβείτε στον κατάλογο του backend σας
cd backend
# Δημιουργήστε ένα εικονικό περιβάλλον (σαν να δημιουργείτε ένα καθαρό δωμάτιο για το έργο σας)
python -m venv venv
# Ενεργοποιήστε το (Linux/Mac)
source ./venv/bin/activate
# Στα Windows, χρησιμοποιήστε:
# venv\Scripts\activate
# Εγκαταστήστε τα καλά πράγματα
pip install openai fastapi uvicorn python-dotenv
Τι μόλις κάναμε:
- Δημιουργήσαμε τη δική μας μικρή φούσκα Python όπου μπορούμε να εγκαθιστούμε πακέτα χωρίς να επηρεάζουμε οτιδήποτε άλλο
- Ενεργοποιήσαμε αυτή τη φούσκα ώστε το τερματικό να γνωρίζει να τη χρησιμοποιεί
- Εγκαταστήσαμε τα απαραίτητα: OpenAI για AI μαγεία, FastAPI για το web API μας, Uvicorn για να το τρέξουμε και python-dotenv για ασφαλή διαχείριση μυστικών
Εξηγούνται βασικές εξαρτήσεις:
- FastAPI: Σύγχρονο, γρήγορο web framework με αυτόματη τεκμηρίωση API
- Uvicorn: Αστραπιαία γρήγορος server ASGI που τρέχει εφαρμογές FastAPI
- OpenAI: Επίσημη βιβλιοθήκη για μοντέλα GitHub και ενσωμάτωση OpenAI API
- python-dotenv: Ασφαλές φορτωμα μεταβλητών περιβάλλοντος από αρχεία .env
Διαμόρφωση Περιβάλλοντος: Διατήρηση Μυστικών Ασφαλών
Πριν ξεκινήσουμε το API μας, πρέπει να μιλήσουμε για ένα από τα πιο σημαντικά μαθήματα στην ανάπτυξη web: πώς να κρατάτε τα μυστικά σας πραγματικά μυστικά. Οι μεταβλητές περιβάλλοντος είναι σαν ένα ασφαλές χρηματοκιβώτιο που μόνο η εφαρμογή σας έχει πρόσβαση.
Τι είναι οι Μεταβλητές Περιβάλλοντος;
Σκεφτείτε τις μεταβλητές περιβάλλοντος ως ένα θησαυροφυλάκιο ασφαλείας – βάζετε τα πολύτιμα πράγματα εκεί, και μόνο εσείς (και η εφαρμογή σας) έχετε το κλειδί να τα βγάλετε. Αντί να γράφετε ευαίσθητες πληροφορίες απευθείας στον κώδικά σας (όπου κυριολεκτικά ο καθένας μπορεί να τις δει) τις αποθηκεύετε με ασφάλεια στο περιβάλλον.
Να η διαφορά:
- Ο λάθος τρόπος: Να γράφετε τον κωδικό σας σε χαρτάκι και να τον κολλάτε στην οθόνη σας
- Ο σωστός τρόπος: Να κρατάτε τον κωδικό σε διαχειριστή κωδικών που μόνο εσείς μπορείτε να ανοίξετε
Γιατί έχουν σημασία οι Μεταβλητές Περιβάλλοντος
# 🚨 ΠΟΤΕ ΜΗΝ ΤΟ ΚΑΝΕΤΕ ΑΥΤΟ - Κλειδί API ορατό σε όλους
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Ο καθένας μπορεί να το κλέψει!
base_url="https://models.github.ai/inference"
)
# ✅ ΚΑΝΤΕ ΑΥΤΟ - Κλειδί API αποθηκευμένο με ασφάλεια
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Μόνο η εφαρμογή σας μπορεί να έχει πρόσβαση σε αυτό
base_url="https://models.github.ai/inference"
)
Τι συμβαίνει αν βάζετε μυστικά σκληρά κωδικοποιημένα:
- Έκθεση σε έλεγχο έκδοσης: Όποιος έχει πρόσβαση στο αποθετήριο Git βλέπει το API key σας
- Δημόσια αποθετήρια: Αν σπρώξετε κώδικα στο GitHub, το κλειδί σας είναι ορατό στο διαδίκτυο
- Κοινοτική χρήση: Άλλοι προγραμματιστές που δουλεύουν στο έργο σας έχουν πρόσβαση στο προσωπικό σας API key
- Παραβιάσεις ασφάλειας: Αν κλέψουν το API key σας, μπορούν να χρησιμοποιήσουν τα credits AI σας
Ρύθμιση του Αρχείου Περιβάλλοντος σας
Δημιουργήστε ένα αρχείο .env στο φάκελο backend σας. Αυτό το αρχείο αποθηκεύει τα μυστικά σας τοπικά:
# Αρχείο .env - Αυτό δεν πρέπει ΠΟΤΕ να δεσμευτεί στο Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
Κατανόηση αρχείου .env:
- Ένα μυστικό ανά γραμμή σε μορφή
KEY=value - Χωρίς κενά γύρω από το σύμβολο ίσον
- Χωρίς εισαγωγικά γύρω από τις τιμές (συνήθως)
- Σχόλια ξεκινούν με
#
Δημιουργία του Προσωπικού Access Token του GitHub
Το token GitHub σας είναι σαν ειδικός κωδικός που δίνει στην εφαρμογή σας δικαίωμα να χρησιμοποιεί τις υπηρεσίες AI του GitHub:
Βήμα προς βήμα δημιουργία token:
- Πηγαίνετε στις Ρυθμίσεις GitHub → Ρυθμίσεις προγραμματιστή → Προσωπικά access tokens → Tokens (classic)
- Κάντε κλικ στο "Generate new token (classic)"
- Ορίστε λήξη (30 μέρες για δοκιμές, μεγαλύτερο για παραγωγή)
- Επιλέξτε scopes: Επιλέξτε "repo" και όποια άλλα δικαιώματα χρειάζεστε
- Δημιουργήστε token και αντιγράψτε το αμέσως (δεν μπορείτε να το δείτε ξανά!)
- Επικολλήστε το στο αρχείο .env σας
# Παράδειγμα του πώς μοιάζει το token σας (αυτό είναι ψεύτικο!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
Φόρτωση Μεταβλητών Περιβάλλοντος στην Python
import os
from dotenv import load_dotenv
# Φόρτωση μεταβλητών περιβάλλοντος από το αρχείο .env
load_dotenv()
# Τώρα μπορείτε να έχετε πρόσβαση σε αυτές με ασφάλεια
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
raise ValueError("GITHUB_TOKEN not found in environment variables!")
client = OpenAI(
api_key=api_key,
base_url="https://models.github.ai/inference"
)
Τι κάνει αυτός ο κώδικας:
- Φορτώνει το αρχείο .env και κάνει τις μεταβλητές διαθέσιμες στην Python
- Ελέγχει αν υπάρχει το απαιτούμενο token (καλή διαχείριση σφαλμάτων!)
- Σημαίνει σαφές σφάλμα αν λείπει το token
- Χρησιμοποιεί το token με ασφάλεια χωρίς να το εκθέτει στον κώδικα
Ασφάλεια Git: Το αρχείο .gitignore
Το .gitignore λέει στο Git ποια αρχεία δεν πρέπει ποτέ να παρακολουθεί ή να ανεβάζει:
# .gitignore - Προσθέστε αυτές τις γραμμές
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
Γιατί αυτό είναι κρίσιμο: Μόλις προσθέσετε το .env στο .gitignore, το Git θα αγνοήσει το αρχείο περιβάλλοντος, αποτρέποντας το ακούσιο ανέβασμα των μυστικών σας στο GitHub.
Διαφορετικά Περιβάλλοντα, Διάφορα Μυστικά
Επαγγελματικές εφαρμογές χρησιμοποιούν διαφορετικά κλειδιά API για διαφορετικά περιβάλλοντα:
# .env.ανάπτυξη
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.παραγωγή
GITHUB_TOKEN=your_production_token
DEBUG=False
Γιατί έχει σημασία αυτό: Δεν θέλετε τα πειράματά σας στην ανάπτυξη να επηρεάζουν το όριο χρήσης AI παραγωγής, και θέλετε διαφορετικά επίπεδα ασφάλειας για διαφορετικά περιβάλλοντα.
Εκκίνηση του Server Ανάπτυξής σας: Φέρνοντας στη Ζωή το FastAPI σας
Τώρα έρχεται η συναρπαστική στιγμή – να ξεκινήσετε τον διακομιστή ανάπτυξης FastAPI και να δείτε την ενσωμάτωση AI να ζωντανεύει! Το FastAPI χρησιμοποιεί τον Uvicorn, έναν εξαιρετικά γρήγορο ASGI διακομιστή που έχει σχεδιαστεί ειδικά για ασύγχρονες εφαρμογές Python.
Κατανόηση της διαδικασίας εκκίνησης του διακομιστή FastAPI
# Μέθοδος 1: Άμεση εκτέλεση Python (περιλαμβάνει αυτόματη επαναφόρτωση)
python api.py
# Μέθοδος 2: Χρήση Uvicorn απευθείας (περισσότερος έλεγχος)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
Όταν εκτελείτε αυτήν την εντολή, αυτό συμβαίνει στα παρασκήνια:
1. Η Python φορτώνει την εφαρμογή FastAPI σας:
- Εισάγει όλες τις απαιτούμενες βιβλιοθήκες (FastAPI, Pydantic, OpenAI κ.ά.)
- Φορτώνει τις μεταβλητές περιβάλλοντος από το αρχείο
.env - Δημιουργεί το στιγμιότυπο της εφαρμογής FastAPI με αυτόματη τεκμηρίωση
2. Ο Uvicorn ρυθμίζει τον ASGI διακομιστή:
- Δεσμεύεται στην θύρα 5000 με δυνατότητες ασύγχρονης διαχείρισης αιτήσεων
- Ορίζει δρομολόγηση αιτήσεων με αυτόματη επικύρωση
- Ενεργοποιεί το hot reload για ανάπτυξη (επανεκκινήσεις σε αλλαγές αρχείων)
- Δημιουργεί διαδραστική τεκμηρίωση API
3. Ο διακομιστής αρχίζει να ακούει:
- Το τερματικό σας εμφανίζει:
INFO: Uvicorn running on http://0.0.0.0:5000 - Ο διακομιστής μπορεί να χειριστεί πολλαπλές ταυτόχρονες αιτήσεις AI
- Το API σας είναι έτοιμο με αυτόματη τεκμηρίωση στο
http://localhost:5000/docs
Τι πρέπει να δείτε όταν όλα λειτουργούν
$ python api.py
INFO: Will watch for changes in these directories: ['/your/project/path']
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO: Started reloader process [12345] using WatchFiles
INFO: Started server process [12346]
INFO: Waiting for application startup.
INFO: Application startup complete.
Κατανόηση της εξόδου FastAPI:
- Will watch for changes: Ενεργοποιημένο το auto-reload για ανάπτυξη
- Uvicorn running: Ο υψηλής απόδοσης ASGI διακομιστής είναι ενεργός
- Started reloader process: Παρακολούθηση αρχείων για αυτόματες επανεκκινήσεις
- Application startup complete: Η εφαρμογή FastAPI ξεκίνησε επιτυχώς
- Interactive docs available: Επισκεφθείτε το
/docsγια αυτόματη τεκμηρίωση API
Δοκιμή του FastAPI σας: Πολλαπλοί Ισχυροί Τρόποι
Το FastAPI παρέχει διάφορους βολικούς τρόπους για να δοκιμάσετε το API σας, συμπεριλαμβανομένης της αυτόματης διαδραστικής τεκμηρίωσης:
Μέθοδος 1: Διαδραστική Τεκμηρίωση API (Συνιστάται)
- Ανοίξτε τον περιηγητή σας και μεταβείτε στο
http://localhost:5000/docs - Θα δείτε το Swagger UI με όλα τα σημεία πρόσβασης τεκμηριωμένα
- Κάντε κλικ στο
/hello→ "Try it out" → Εισάγετε ένα μήνυμα δοκιμής → "Execute" - Δείτε την απάντηση απευθείας στον περιηγητή με σωστή μορφοποίηση
Μέθοδος 2: Βασική δοκιμή από τον περιηγητή
- Μεταβείτε στο
http://localhost:5000για το βασικό endpoint - Μεταβείτε στο
http://localhost:5000/healthγια έλεγχο υγείας διακομιστή - Αυτό επιβεβαιώνει ότι ο διακομιστής FastAPI λειτουργεί σωστά
Μέθοδος 2: Δοκιμή από τη γραμμή εντολών (Προχωρημένη)
# Δοκιμή με curl (αν είναι διαθέσιμο)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Αναμενόμενη απάντηση:
# {"response": "Γεια! Είμαι ο βοηθός AI σας. Πώς μπορώ να σας βοηθήσω σήμερα;"}
Μέθοδος 3: Σενάριο δοκιμής Python
# test_api.py - Δημιουργήστε αυτό το αρχείο για να δοκιμάσετε το API σας
import requests
import json
# Δοκιμάστε το endpoint του API
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}
response = requests.post(url, json=data)
if response.status_code == 200:
result = response.json()
print("AI Response:", result['response'])
else:
print("Error:", response.status_code, response.text)
Επίλυση Συνηθισμένων Προβλημάτων Εκκίνησης
| Μήνυμα Σφάλματος | Τι Σημαίνει | Πώς να το Διορθώσετε |
|---|---|---|
ModuleNotFoundError: No module named 'fastapi' |
Το FastAPI δεν είναι εγκατεστημένο | Εκτελέστε pip install fastapi uvicorn στο virtual environment σας |
ModuleNotFoundError: No module named 'uvicorn' |
Ο ASGI διακομιστής δεν είναι εγκατεστημένος | Εκτελέστε pip install uvicorn στο virtual environment σας |
KeyError: 'GITHUB_TOKEN' |
Η μεταβλητή περιβάλλοντος δεν βρέθηκε | Ελέγξτε το .env αρχείο σας και την κλήση load_dotenv() |
Address already in use |
Η θύρα 5000 είναι κατειλημμένη | Τερματίστε άλλες διεργασίες που χρησιμοποιούν τη θύρα 5000 ή αλλάξτε τη θύρα |
ValidationError |
Τα δεδομένα αιτήματος δεν ταιριάζουν με το μοντέλο Pydantic | Ελέγξτε ότι η μορφή αιτήματος ταιριάζει με το αναμενόμενο σχήμα |
HTTPException 422 |
Μη επεξεργάσιμη οντότητα | Η επικύρωση του αιτήματος απέτυχε, δείτε το /docs για σωστή μορφή |
OpenAI API error |
Αποτυχία πιστοποίησης υπηρεσίας AI | Επαληθεύστε ότι το GitHub token σας είναι σωστό και έχει τις απαραίτητες άδειες |
Καλύτερες Πρακτικές Ανάπτυξης
Hot Reloading: Το FastAPI με Uvicorn παρέχει αυτόματη επανεκκίνηση όταν αποθηκεύετε αλλαγές στα αρχεία Python. Αυτό σημαίνει ότι μπορείτε να τροποποιείτε τον κώδικα και να δοκιμάζετε αμέσως χωρίς χειροκίνητη επανεκκίνηση.
# Ενεργοποίηση της ζεστής επαναφόρτωσης ρητά
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True ενεργοποιεί τη ζεστή επαναφόρτωση
Καταγραφή για την Ανάπτυξη: Προσθέστε καταγραφές για να κατανοείτε τι συμβαίνει:
import logging
# Ρυθμίστε την καταγραφή
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
@app.route("/hello", methods=["POST"])
def hello():
data = request.get_json()
message = data.get("message", "")
logger.info(f"Received message: {message}")
if not message:
logger.warning("Empty message received")
return jsonify({"error": "Message field is required"}), 400
try:
response = call_llm(message, "You are a helpful and friendly assistant.")
logger.info(f"AI response generated successfully")
return jsonify({"response": response})
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return jsonify({"error": "AI service temporarily unavailable"}), 500
Γιατί βοηθά η καταγραφή: Κατά την ανάπτυξη, μπορείτε να δείτε ακριβώς ποιες αιτήσεις έρχονται, τι απαντά το AI και πού εμφανίζονται σφάλματα. Αυτό καθιστά τον εντοπισμό σφαλμάτων πολύ πιο γρήγορο.
Ρύθμιση για GitHub Codespaces: Ανάπτυξη στο Cloud με Εύκολο Τρόπο
Το GitHub Codespaces είναι σαν να έχετε έναν ισχυρό υπολογιστή ανάπτυξης στο cloud που μπορείτε να προσπελάσετε από οποιονδήποτε περιηγητή. Αν εργάζεστε σε Codespaces, υπάρχουν μερικά πρόσθετα βήματα για να κάνετε το backend σας προσβάσιμο στο frontend σας.
Κατανόηση Δικτύωσης στα Codespaces
Σε ένα τοπικό περιβάλλον ανάπτυξης, όλα τρέχουν στον ίδιο υπολογιστή:
- Backend:
http://localhost:5000 - Frontend:
http://localhost:3000(ή file://)
Στα Codespaces, το περιβάλλον ανάπτυξής σας τρέχει στους servers του GitHub, οπότε το "localhost" έχει διαφορετική έννοια. Το GitHub δημιουργεί αυτόματα δημόσια URLs για τις υπηρεσίες σας, αλλά πρέπει να τις ρυθμίσετε σωστά.
Βήμα-βήμα Ρύθμιση Codespaces
1. Εκκινήστε τον backend διακομιστή σας:
cd backend
python api.py
Θα δείτε το γνώριμο μήνυμα εκκίνησης FastAPI/Uvicorn, αλλά σημειώστε ότι τρέχει μέσα στο περιβάλλον Codespace.
2. Ρυθμίστε την ορατότητα της θύρας:
- Βρείτε την καρτέλα "Ports" στο κάτω πάνελ του VS Code
- Βρείτε τη θύρα 5000 στη λίστα
- Δεξί κλικ στη θύρα 5000
- Επιλέξτε "Port Visibility" → "Public"
Γιατί να το κάνετε δημόσιο; Από προεπιλογή, οι θύρες στο Codespace είναι ιδιωτικές (προσβάσιμες μόνο από εσάς). Δημόσιο επιτρέπει στο frontend (που τρέχει στον περιηγητή) να επικοινωνεί με το backend.
3. Πάρτε το δημόσιο URL σας: Μετά τη δημόσια ρύθμιση θύρας, θα δείτε ένα URL όπως:
https://your-codespace-name-5000.app.github.dev
4. Ενημερώστε τη ρύθμιση του frontend:
// Στο frontend app.js σας, ενημερώστε το BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Κατανόηση των URLs του Codespace
Τα URLs του Codespace ακολουθούν ένα προβλέψιμο μοτίβο:
https://[codespace-name]-[port].app.github.dev
Ανάλυση:
codespace-name: Ένας μοναδικός αναγνωριστικός για το Codespace σας (συνήθως περιλαμβάνει το όνομα χρήστη)port: Αριθμός θύρας όπου τρέχει η υπηρεσία σας (5000 για την εφαρμογή FastAPI)app.github.dev: Ο τομέας του GitHub για εφαρμογές Codespace
Δοκιμή της Ρύθμισης Codespace
1. Δοκιμάστε το backend απευθείας: Ανοίξτε το δημόσιο URL σε νέα καρτέλα περιηγητή. Θα δείτε:
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
2. Δοκιμάστε με εργαλεία προγραμματιστή στον περιηγητή:
// Ανοίξτε την κονσόλα του προγράμματος περιήγησης και δοκιμάστε το API σας
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({message: 'Hello from Codespaces!'})
})
.then(response => response.json())
.then(data => console.log(data));
Codespaces vs Τοπική Ανάπτυξη
| Παράμετρος | Τοπική Ανάπτυξη | GitHub Codespaces |
|---|---|---|
| Χρόνος Ρύθμισης | Μεγαλύτερος (εγκατάσταση Python, εξαρτήσεων) | Άμεση (προρυθμισμένο περιβάλλον) |
| Πρόσβαση URL | http://localhost:5000 |
https://xyz-5000.app.github.dev |
| Διαμόρφωση Θύρας | Αυτόματη | Χειροκίνητη (δημόσιοι θύρες) |
| Διατήρηση Αρχείων | Τοπικός υπολογιστής | Αποθετήριο GitHub |
| Συνεργασία | Δύσκολο να μοιραστείτε περιβάλλον | Εύκολο να μοιραστείτε σύνδεσμο Codespace |
| Εξάρτηση από Διαδίκτυο | Μόνο για κλήσεις AI API | Απαιτείται για τα πάντα |
Συμβουλές Ανάπτυξης Codespace
Μεταβλητές Περιβάλλοντος στα Codespaces:
Το αρχείο .env λειτουργεί όπως και στο τοπικό, αλλά μπορείτε επίσης να ορίσετε μεταβλητές περιβάλλοντος απευθείας στο Codespace:
# Ορίστε μεταβλητή περιβάλλοντος για την τρέχουσα συνεδρία
export GITHUB_TOKEN="your_token_here"
# Ή προσθέστε στο .bashrc σας για μόνιμη διατήρηση
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
Διαχείριση Θυρών:
- Τα Codespaces ανιχνεύουν αυτόματα όταν η εφαρμογή αρχίζει να ακούει σε μια θύρα
- Μπορείτε να προωθήσετε πολλαπλές θύρες ταυτόχρονα (χρήσιμο αν προσθέσετε βάση δεδομένων αργότερα)
- Οι θύρες παραμένουν προσβάσιμες όσο το Codespace τρέχει
Ροή Εργασίας Ανάπτυξης:
- Κάντε αλλαγές στον κώδικα στο VS Code
- Το FastAPI επανφορτώνει αυτόματα (χάρη στη λειτουργία reload του Uvicorn)
- Δοκιμάστε τις αλλαγές άμεσα μέσω του δημόσιου URL
- Κάντε commit και push όταν είστε έτοιμοι
💡 Συμβουλή Επαγγελματία: Κρατήστε στα αγαπημένα το URL του backend στο Codespace κατά την ανάπτυξη. Επειδή τα ονόματα Codespace είναι σταθερά, το URL δεν αλλάζει όσο χρησιμοποιείτε το ίδιο Codespace.
Δημιουργία της Εμπρόσθιας Εφαρμογής Συνομιλίας: Όπου οι Άνθρωποι Συναντούν το AI
Τώρα θα κατασκευάσουμε το περιβάλλον χρήστη – το μέρος που καθορίζει πώς οι άνθρωποι αλληλεπιδρούν με τον βοηθό AI σας. Όπως ο σχεδιασμός της αρχικής διεπαφής iPhone, εστιάζουμε στο να κάνουμε την πολύπλοκη τεχνολογία να φαίνεται διαισθητική και φυσική στη χρήση.
Κατανόηση της Σύγχρονης Αρχιτεκτονικής Frontend
Η διεπαφή συνομιλίας μας θα είναι αυτό που ονομάζουμε "Εφαρμογή Μίας Σελίδας" ή SPA. Αντί για την παλιά μέθοδο όπου κάθε κλικ φορτώνει νέα σελίδα, η εφαρμογή μας ενημερώνει ομαλά και άμεσα:
Παλιά ιστοσελίδα: Όπως το να διαβάζεις ένα φυσικό βιβλίο – γυρίζεις σε εντελώς νέες σελίδες
Η εφαρμογή συνομιλίας μας: Όπως το να χρησιμοποιείς το τηλέφωνό σου – όλα ρέουν και ενημερώνονται χωρίς διακοπή
graph TD
A[Ο Χρήστης Πληκτρολογεί Μήνυμα] --> B[Η JavaScript Καταγράφει την Είσοδο]
B --> C[Επικύρωση & Μορφοποίηση Δεδομένων]
C --> D[Αποστολή στο Backend API]
D --> E[Εμφάνιση Κατάστασης Φόρτωσης]
E --> F[Λήψη Απάντησης AI]
F --> G[Ενημέρωση Διεπαφής Συνομιλίας]
G --> H[Έτοιμο για Επόμενο Μήνυμα]
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(text, role)
+escapeHtml(text)
+scrollToBottom()
+setLoading(isLoading)
}
ChatApp --> DOM : χειρίζεται
ChatApp --> FastAPI : στέλνει αιτήματα
Οι Τρεις Πυλώνες της Ανάπτυξης Frontend
Κάθε εφαρμογή frontend – από απλές ιστοσελίδες μέχρι πολύπλοκες εφαρμογές όπως το Discord ή Slack – βασίζεται σε τρεις βασικές τεχνολογίες. Σκεφτείτε τες ως τη βάση για ό,τι βλέπετε και με το οποίο αλληλεπιδράτε στο διαδίκτυο:
HTML (Δομή): Είναι το θεμέλιο σας
- Αποφασίζει ποια στοιχεία υπάρχουν (κουμπιά, περιοχές κειμένου, κοντέινερ)
- Δίνει νόημα στο περιεχόμενο (αυτό είναι κεφαλίδα, αυτό είναι φόρμα, κλπ.)
- Δημιουργεί τη βασική δομή πάνω στην οποία χτίζεται τα πάντα
CSS (Παρουσίαση): Είναι ο εσωτερικός σχεδιαστής
- Κάνει όλα να φαίνονται όμορφα (χρώματα, γραμματοσειρές, διατάξεις)
- Διαχειρίζεται διαφορετικά μεγέθη οθονών (τηλέφωνο, λάπτοπ, τάμπλετ)
- Δημιουργεί ομαλές κινήσεις και οπτικά εφέ
JavaScript (Συμπεριφορά): Είναι ο εγκέφαλος
- Ανταποκρίνεται σε ενέργειες χρηστών (κλικ, πληκτρολόγηση, κύλιση)
- Επικοινωνεί με το backend και ενημερώνει τη σελίδα
- Κάνει τα πάντα διαδραστικά και δυναμικά
Σκεφτείτε το σαν αρχιτεκτονικό σχέδιο:
- HTML: Το δομικό σχέδιο (ορίζει χώρους και σχέσεις)
- CSS: Ο αισθητικός και περιβαλλοντικός σχεδιασμός (οπτικό στυλ και εμπειρία χρήστη)
- JavaScript: Τα μηχανικά συστήματα (λειτουργικότητα και διαδραστικότητα)
Γιατί έχει Σημασία η Σύγχρονη Αρχιτεκτονική JavaScript
Η εφαρμογή συνομιλίας μας θα χρησιμοποιήσει σύγχρονα μοτίβα JavaScript που βλέπετε σε επαγγελματικές εφαρμογές. Η κατανόηση αυτών των εννοιών θα σας βοηθήσει καθώς θα εξελίσσεστε ως προγραμματιστής:
Αρχιτεκτονική με Κλάσεις: Θα οργανώσουμε τον κώδικά μας σε κλάσεις, που είναι σαν να δημιουργούμε σχέδια αντικειμένων
Async/Await: Σύγχρονος τρόπος για χειρισμό λειτουργιών που παίρνουν χρόνο (π.χ. κλήσεις API)
Προγραμματισμός με Βάση τα Γεγονότα: Η εφαρμογή μας ανταποκρίνεται σε ενέργειες χρηστών (κλικ, πατήματα πλήκτρων) αντί να τρέχει σε βρόχο
Διαχείριση DOM: Δυναμική ενημέρωση του περιεχομένου της σελίδας βάσει αλληλεπιδράσεων χρηστών και απαντήσεων API
Δομή Έργου
Δημιουργήστε έναν φάκελο frontend με την παρακάτω οργανωμένη δομή:
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
Κατανόηση της αρχιτεκτονικής:
- Διαχωρίζει τις ανησυχίες μεταξύ δομής (HTML), συμπεριφοράς (JavaScript) και παρουσίασης (CSS)
- Διατηρεί μια απλή δομή φακέλων που είναι εύκολη στην πλοήγηση και τροποποίηση
- Ακολουθεί βέλτιστες πρακτικές web ανάπτυξης για οργάνωση και ευκολία συντήρησης
Κατασκευή της Βάσης HTML: Σημασιολογική Δομή για Προσβασιμότητα
Ας ξεκινήσουμε με τη δομή HTML. Η σύγχρονη ανάπτυξη web δίνει έμφαση στο "σημασιολογικό HTML" – τη χρήση HTML στοιχείων που περιγράφουν καθαρά τον σκοπό τους, όχι απλώς την εμφάνισή τους. Αυτό κάνει την εφαρμογή σας προσβάσιμη σε αναγνώστες οθόνης, μηχανές αναζήτησης και άλλα εργαλεία.
Γιατί έχει σημασία το σημασιολογικό HTML: Φανταστείτε πως περιγράφετε την εφαρμογή συνομιλίας σας σε κάποιον τηλεφωνικά. Θα λέγατε "υπάρχει μια κεφαλίδα με τίτλο, μια κύρια περιοχή όπου εμφανίζονται οι συνομιλίες, και μια φόρμα στο κάτω μέρος για να γράφεις μηνύματα." Το σημασιολογικό HTML χρησιμοποιεί στοιχεία που ταιριάζουν σε αυτήν την φυσική περιγραφή.
Δημιουργήστε το index.html με αυτήν την προσεκτικά δομημένη σήμανση:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chat Assistant</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<header class="chat-header">
<h1>AI Chat Assistant</h1>
<p>Ask me anything!</p>
</header>
<main class="chat-messages" id="messages" role="log" aria-live="polite">
<!-- Messages will be dynamically added here -->
</main>
<form class="chat-form" id="chatForm">
<div class="input-group">
<input
type="text"
id="messageInput"
placeholder="Type your message here..."
required
aria-label="Chat message input"
>
<button type="submit" id="sendBtn" aria-label="Send message">
Send
</button>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
Κατανόηση κάθε HTML στοιχείου και του σκοπού του:
Δομή Εγγράφου
<!DOCTYPE html>: Ενημερώνει τον περιηγητή ότι πρόκειται για σύγχρονο HTML5<html lang="en">: Καθορίζει τη γλώσσα της σελίδας για αναγνώστες οθόνης και εργαλεία μετάφρασης<meta charset="UTF-8">: Εξασφαλίζει σωστή κωδικοποίηση χαρακτήρων για διεθνές κείμενο<meta name="viewport"...>: Κάνει τη σελίδα φιλική για κινητές συσκευές ελέγχοντας το zoom και το μέγεθος
Σημασιολογικά Στοιχεία
<header>: Ταυτοποιεί σαφώς το πάνω μέρος με τίτλο και περιγραφή<main>: Προορίζεται για το κύριο περιεχόμενο (εκεί που συμβαίνουν οι συνομιλίες)<form>: Σημασιολογικά σωστό για εισαγωγή χρήστη, επιτρέπει σωστή πλοήγηση με πληκτρολόγιο
Χαρακτηριστικά Προσβασιμότητας
role="log": Αναφέρει στους αναγνώστες οθόνης ότι αυτή η περιοχή περιέχει χρονική καταγραφή μηνυμάτωνaria-live="polite": Ανακοινώνει νέα μηνύματα στους αναγνώστες οθόνης χωρίς διακοπήaria-label: Παρέχει περιγραφικές ετικέτες για στοιχεία φόρμαςrequired: Ο περιηγητής επικυρώνει ότι ο χρήστης πρέπει να εισάγει μήνυμα πριν αποστείλει
Ενσωμάτωση CSS και JavaScript
classattributes: Παρέχουν σημεία σύνδεσης για CSS (π.χ.chat-container,input-group)idattributes: Επιτρέπουν στο JavaScript να βρει και να χειριστεί συγκεκριμένα στοιχεία- Τοποθέτηση σεναρίου: Το αρχείο JavaScript φορτώνεται στο τέλος για να φορτώνει πρώτα το HTML
Γιατί δουλεύει αυτή η δομή:
- Λογική ροή: Header → Κύριο περιεχόμενο → Φόρμα εισόδου ταιριάζει με τη φυσική σειρά ανάγνωσης
- Προσβασιμότητα με πληκτρολόγιο: Οι χρήστες μπορούν να μετακινηθούν με tab σε όλα τα διαδραστικά στοιχεία
- Φιλικό προς αναγνώστες οθόνης: Καθαρά σημεία αναφοράς και περιγραφές για χρήστες με προβλήματα όρασης
- Φιλικό για κινητά: Το meta tag viewport επιτρέπει ανταποκρινόμενο σχεδιασμό
- Προοδευτική βελτίωση: Λειτουργεί ακόμα και αν το CSS ή JavaScript δεν φορτώσουν
Προσθήκη Διαδραστικού JavaScript: Λογική Σύγχρονης Web Εφαρμογής
Ας δημιουργήσουμε τώρα το JavaScript που θα ζωντανέψει το περιβάλλον συνομιλίας μας. Θα χρησιμοποιήσουμε σύγχρονα μοτίβα JavaScript που θα συναντήσετε στην επαγγελματική ανάπτυξη web, συμπεριλαμβανομένων των κλάσεων ES6, async/await και προγραμματισμού βάσει γεγονότων.
Κατανόηση της Σύγχρονης Αρχιτεκτονικής JavaScript
Αντί να γράφουμε διαδικαστικό κώδικα (μια σειρά από συναρτήσεις που εκτελούνται με σειρά), θα δημιουργήσουμε μια αρχιτεκτονική βασισμένη σε κλάσεις. Σκεφτείτε μια κλάση ως ένα σχέδιο για τη δημιουργία αντικειμένων – όπως ένα αρχιτεκτονικό σχέδιο που μπορεί να χρησιμοποιηθεί για να χτιστούν πολλά σπίτια.
Γιατί να χρησιμοποιούμε κλάσεις σε web εφαρμογές;
- Οργάνωση: Όλη η σχετιζόμενη λειτουργικότητα συγκεντρώνεται μαζί
- Επαναχρησιμοποίηση: Μπορείτε να δημιουργήσετε πολλαπλές εμφανίσεις συνομιλίας στην ίδια σελίδα
- Ευκολία συντήρησης: Πιο εύκολο για debugging και τροποποίηση συγκεκριμένων χαρακτηριστικών
- Επαγγελματικό πρότυπο: Αυτό το μοτίβο χρησιμοποιείται σε πλαίσια όπως τα React, Vue και Angular
Δημιουργήστε το app.js με αυτό το σύγχρονο, καλά δομημένο JavaScript:
// app.js - Λογική μοντέρνας εφαρμογής συνομιλίας
class ChatApp {
constructor() {
// Πάρε αναφορές σε στοιχεία DOM που θα χρειαστεί να χειριστούμε
this.messages = document.getElementById("messages");
this.form = document.getElementById("chatForm");
this.input = document.getElementById("messageInput");
this.sendButton = document.getElementById("sendBtn");
// Ρύθμισε το URL του backend εδώ
this.BASE_URL = "http://localhost:5000"; // Ενημέρωσε αυτό για το περιβάλλον σου
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
// Ρύθμισε ακροατές συμβάντων όταν δημιουργηθεί η εφαρμογή συνομιλίας
this.initializeEventListeners();
}
initializeEventListeners() {
// Άκου για υποβολή φόρμας (όταν ο χρήστης πατά Αποστολή ή Enter)
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Επίσης άκου το πλήκτρο Enter στο πεδίο εισαγωγής (καλύτερη εμπειρία χρήστη)
this.input.addEventListener("keypress", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.handleSubmit(e);
}
});
}
async handleSubmit(event) {
event.preventDefault(); // Πρόλαβε η φόρμα να μη φρεσκάρει τη σελίδα
const messageText = this.input.value.trim();
if (!messageText) return; // Μην στέλνεις κενά μηνύματα
// Παρέχει ανατροφοδότηση στον χρήστη ότι κάτι συμβαίνει
this.setLoading(true);
// Πρόσθεσε άμεσα το μήνυμα του χρήστη στη συνομιλία (αισιόδοξη διεπαφή χρήστη)
this.appendMessage(messageText, "user");
// Καθάρισε το πεδίο εισαγωγής για να μπορεί ο χρήστης να γράψει το επόμενο μήνυμα
this.input.value = '';
try {
// Καλέστε το API τεχνητής νοημοσύνης και περίμενε την απάντηση
const reply = await this.callAPI(messageText);
// Πρόσθεσε την απάντηση της τεχνητής νοημοσύνης στη συνομιλία
this.appendMessage(reply, "assistant");
} catch (error) {
console.error('API Error:', error);
this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
} finally {
// Επανενεργοποίησε τη διεπαφή ανεξάρτητα από επιτυχία ή αποτυχία
this.setLoading(false);
}
}
async callAPI(message) {
const response = await fetch(this.API_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ message })
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.response;
}
appendMessage(text, role) {
const messageElement = document.createElement("div");
messageElement.className = `message ${role}`;
messageElement.innerHTML = `
<div class="message-content">
<span class="message-text">${this.escapeHtml(text)}</span>
<span class="message-time">${new Date().toLocaleTimeString()}</span>
</div>
`;
this.messages.appendChild(messageElement);
this.scrollToBottom();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
scrollToBottom() {
this.messages.scrollTop = this.messages.scrollHeight;
}
setLoading(isLoading) {
this.sendButton.disabled = isLoading;
this.input.disabled = isLoading;
this.sendButton.textContent = isLoading ? "Sending..." : "Send";
}
}
// Αρχικοποίησε την εφαρμογή συνομιλίας όταν φορτώνει η σελίδα
document.addEventListener("DOMContentLoaded", () => {
new ChatApp();
});
Κατανόηση Κάθε Έννοιας JavaScript
Δομή Κλάσης ES6:
class ChatApp {
constructor() {
// Αυτό εκτελείται όταν δημιουργείτε μια νέα παρουσία του ChatApp
// Είναι σαν τη λειτουργία "ρύθμισης" για το chat σας
}
methodName() {
// Οι μέθοδοι είναι συναρτήσεις που ανήκουν στην κλάση
// Μπορούν να έχουν πρόσβαση σε ιδιότητες της κλάσης χρησιμοποιώντας το "this"
}
}
Μοτίβο Async/Await:
// Παλαιός τρόπος (κόλαση callback):
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Σύγχρονος τρόπος (async/await):
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
Προγραμματισμός Βάσει Γεγονότων: Αντί να ελέγχουμε συνεχώς αν έχει συμβεί κάτι, «ακούμε» για γεγονότα:
// Όταν υποβάλλεται η φόρμα, εκτέλεσε την handleSubmit
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Όταν πατιέται το πλήκτρο Enter, επίσης εκτέλεσε την handleSubmit
this.input.addEventListener("keypress", (e) => { /* ... */ });
Χειρισμός DOM:
// Δημιουργήστε νέα στοιχεία
const messageElement = document.createElement("div");
// Τροποποιήστε τις ιδιότητές τους
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";
// Προσθέστε στη σελίδα
this.messages.appendChild(messageElement);
Ασφάλεια και Καλύτερες Πρακτικές
Πρόληψη XSS:
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text; // Αυτό αποφεύγει αυτόματα το HTML
return div.innerHTML;
}
Γιατί είναι σημαντικό: Αν ένας χρήστης πληκτρολογήσει <script>alert('hack')</script>, αυτή η συνάρτηση διασφαλίζει ότι θα εμφανιστεί ως κείμενο αντί να εκτελεστεί ως κώδικας.
Διαχείριση Σφαλμάτων:
try {
const reply = await this.callAPI(messageText);
this.appendMessage(reply, "assistant");
} catch (error) {
// Εμφάνιση φιλικού προς τον χρήστη σφάλματος αντί να καταρρεύσει η εφαρμογή
this.appendMessage("Sorry, I'm having trouble...", "error");
}
Παράμετροι Εμπειρίας Χρήστη:
- Βελτιστοποιημένο UI: Προσθέτει αμέσως το μήνυμα του χρήστη, χωρίς να περιμένει την απάντηση του διακομιστή
- Καταστάσεις φόρτωσης: Απενεργοποιεί κουμπιά και εμφανίζει "Αποστολή..." όσο περιμένει
- Αυτόματο κύλιση: Κρατά ορατά τα πιο πρόσφατα μηνύματα
- Επικύρωση εισόδου: Δεν στέλνει κενά μηνύματα
- Συντομεύσεις πληκτρολογίου: Το πλήκτρο Enter στέλνει μηνύματα (όπως σε πραγματικές εφαρμογές συνομιλίας)
Κατανόηση της Ροής της Εφαρμογής
- Φόρτωση σελίδας → ενεργοποιείται το
DOMContentLoadedγεγονός → δημιουργείται τοnew ChatApp() - Εκτέλεση constructor → Λαμβάνει αναφορές DOM στοιχείων → Ορίζει ακροατές γεγονότων
- Ο χρήστης πληκτρολογεί μήνυμα → Πατά Enter ή κλικάρει Αποστολή → Εκτελείται η
handleSubmit - handleSubmit → Επικυρώνει είσοδο → Εμφανίζει κατάσταση φόρτωσης → Καλεί το API
- Το API απαντά → Προσθέτει μήνυμα AI στη συνομιλία → Επαναενεργοποιεί το περιβάλλον
- Έτοιμο για το επόμενο μήνυμα → Ο χρήστης συνεχίζει να συνομιλεί
Αυτή η αρχιτεκτονική είναι επεκτάσιμη – μπορείτε εύκολα να προσθέσετε χαρακτηριστικά όπως επεξεργασία μηνυμάτων, μεταφορτώσεις αρχείων ή πολλαπλά νήματα συνομιλιών χωρίς να ξαναγράψετε τη βασική δομή.
🎯 Παιδαγωγικός Έλεγχος: Σύγχρονη Αρχιτεκτονική Frontend
Κατανόηση Αρχιτεκτονικής: Έχετε υλοποιήσει μια πλήρη εφαρμογή μίας σελίδας χρησιμοποιώντας σύγχρονα μοτίβα JavaScript. Αυτό αντιπροσωπεύει την ανάπτυξη frontend σε επαγγελματικό επίπεδο.
Κύριες Έννοιες που Κατακτήθηκαν:
- Αρχιτεκτονική Κλάσεων ES6: Οργανωμένη, εύκολα συντηρήσιμη δομή κώδικα
- Μοτίβα Async/Await: Σύγχρονος ασύγχρονος προγραμματισμός
- Προγραμματισμός Βάσει Γεγονότων: Σχεδιασμός απόκρισης UI
- Καλύτερες Πρακτικές Ασφάλειας: Πρόληψη XSS και επικύρωση εισόδου
Σύνδεση με τη Βιομηχανία: Τα μοτίβα που μάθατε (αρχιτεκτονική βασισμένη σε κλάσεις, ασύγχρονες λειτουργίες, χειρισμός DOM) είναι η βάση των σύγχρονων πλαισίων όπως React, Vue και Angular. Δημιουργείτε με τον ίδιο αρχιτεκτονικό τρόπο που χρησιμοποιείται σε παραγωγικές εφαρμογές.
Ερώτηση για Σκέψη: Πώς θα επεκτείνατε αυτή την εφαρμογή συνομιλίας για να διαχειρίζεται πολλαπλές συνομιλίες ή αυθεντικοποίηση χρήστη; Σκεφτείτε τις αρχιτεκτονικές αλλαγές που απαιτούνται και πώς θα εξελισσόταν η δομή της κλάσης.
Στυλ για το Περιβάλλον Συνομιλίας σας
Ας δημιουργήσουμε τώρα ένα σύγχρονο, οπτικά ελκυστικό περιβάλλον συνομιλίας με CSS. Το καλό στυλ κάνει την εφαρμογή σας να φαίνεται επαγγελματική και βελτιώνει τη συνολική εμπειρία χρήστη. Θα χρησιμοποιήσουμε σύγχρονα χαρακτηριστικά CSS όπως Flexbox, CSS Grid και προσαρμοσμένες ιδιότητες για ένα ανταποκρινόμενο και προσβάσιμο σχεδιασμό.
Δημιουργήστε το styles.css με αυτά τα ολοκληρωμένα στυλ:
/* styles.css - Modern chat interface styling */
:root {
--primary-color: #2563eb;
--secondary-color: #f1f5f9;
--user-color: #3b82f6;
--assistant-color: #6b7280;
--error-color: #ef4444;
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-radius: 12px;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.chat-container {
width: 100%;
max-width: 800px;
height: 600px;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-header {
background: var(--primary-color);
color: white;
padding: 20px;
text-align: center;
}
.chat-header h1 {
font-size: 1.5rem;
margin-bottom: 5px;
}
.chat-header p {
opacity: 0.9;
font-size: 0.9rem;
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
background: var(--secondary-color);
}
.message {
display: flex;
max-width: 80%;
animation: slideIn 0.3s ease-out;
}
.message.user {
align-self: flex-end;
}
.message.user .message-content {
background: var(--user-color);
color: white;
border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius);
}
.message.assistant {
align-self: flex-start;
}
.message.assistant .message-content {
background: white;
color: var(--text-primary);
border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px;
border: 1px solid #e2e8f0;
}
.message.error .message-content {
background: var(--error-color);
color: white;
border-radius: var(--border-radius);
}
.message-content {
padding: 12px 16px;
box-shadow: var(--shadow);
position: relative;
}
.message-text {
display: block;
line-height: 1.5;
word-wrap: break-word;
}
.message-time {
display: block;
font-size: 0.75rem;
opacity: 0.7;
margin-top: 5px;
}
.chat-form {
padding: 20px;
border-top: 1px solid #e2e8f0;
background: white;
}
.input-group {
display: flex;
gap: 10px;
align-items: center;
}
#messageInput {
flex: 1;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: var(--border-radius);
font-size: 1rem;
outline: none;
transition: border-color 0.2s ease;
}
#messageInput:focus {
border-color: var(--primary-color);
}
#messageInput:disabled {
background: #f8fafc;
opacity: 0.6;
cursor: not-allowed;
}
#sendBtn {
padding: 12px 24px;
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
min-width: 80px;
}
#sendBtn:hover:not(:disabled) {
background: #1d4ed8;
}
#sendBtn:disabled {
background: #94a3b8;
cursor: not-allowed;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive design for mobile devices */
@media (max-width: 768px) {
body {
padding: 10px;
}
.chat-container {
height: calc(100vh - 20px);
border-radius: 8px;
}
.message {
max-width: 90%;
}
.input-group {
flex-direction: column;
gap: 10px;
}
#messageInput {
width: 100%;
}
#sendBtn {
width: 100%;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.message {
animation: none;
}
* {
transition: none !important;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.chat-container {
background: #1e293b;
color: #f1f5f9;
}
.chat-messages {
background: #0f172a;
}
.message.assistant .message-content {
background: #334155;
color: #f1f5f9;
border-color: #475569;
}
.chat-form {
background: #1e293b;
border-color: #475569;
}
#messageInput {
background: #334155;
color: #f1f5f9;
border-color: #475569;
}
}
Κατανόηση της αρχιτεκτονικής CSS:
- Χρησιμοποιεί προσαρμοσμένες ιδιότητες CSS (μεταβλητές) για συνεπή θεματολογία και εύκολη συντήρηση
- Εφαρμόζει διάταξη Flexbox για ανταποκρινόμενο σχεδιασμό και σωστή τοποθέτηση
- Περιλαμβάνει ομαλές κινήσεις για εμφάνιση μηνυμάτων χωρίς να αποσπούν την προσοχή
- Παρέχει οπτική διάκριση μεταξύ μηνυμάτων χρήστη, απαντήσεων AI και καταστάσεων σφάλματος
- Υποστηρίζει σχεδιασμό που ανταποκρίνεται και λειτουργεί σε επιτραπέζιους και κινητές συσκευές
- Λαμβάνει υπόψη την προσβασιμότητα με προτιμήσεις μειωμένης κίνησης και σωστές αναλογίες αντίθεσης
- Προσφέρει υποστήριξη σκοτεινής λειτουργίας βάσει προτιμήσεων συστήματος χρήστη
Ρύθμιση του Backend URL σας
Το τελευταίο βήμα είναι η ενημέρωση του BASE_URL στο JavaScript σας ώστε να ταιριάζει με τον backend server σας:
// Για τοπική ανάπτυξη
this.BASE_URL = "http://localhost:5000";
// Για GitHub Codespaces (αντικαταστήστε με το πραγματικό σας URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Καθορισμός του backend URL:
- Τοπική ανάπτυξη: Χρησιμοποιήστε
http://localhost:5000αν τρέχετε frontend και backend τοπικά - Codespaces: Βρείτε το URL του backend στην καρτέλα Ports αφού κάνετε δημόσιο το port 5000
- Παραγωγή: Αντικαταστήστε με το πραγματικό domain σας όταν κάνετε deploy σε hosting υπηρεσία
💡 Συμβουλή Δοκιμής: Μπορείτε να δοκιμάσετε το backend απευθείας επισκεπτόμενοι το root URL στο πρόγραμμα περιήγησης. Θα δείτε το μήνυμα καλωσορίσματος από τον FastAPI server σας.
Δοκιμές και Ανάπτυξη
Τώρα που έχετε κατασκευάσει τόσο frontend όσο και backend, ας ελέγξουμε ότι λειτουργούν μαζί και να εξερευνήσουμε επιλογές ανάπτυξης για να μοιραστείτε τον βοηθό συνομιλίας σας με άλλους.
Ροή Τοπικών Δοκιμών
Ακολουθήστε αυτά τα βήματα για να δοκιμάσετε την ολοκληρωμένη εφαρμογή σας:
graph TD
A[Εκκίνηση Διακομιστή Backend] --> B[Διαμόρφωση Μεταβλητών Περιβάλλοντος]
B --> C[Δοκιμή Τελικών Σημείων API]
C --> D[Άνοιγμα Frontend στον Περιηγητή]
D --> E[Δοκιμή Λειτουργικότητας Συνομιλίας]
E --> F[Εντοπισμός Σφαλμάτων]
Βήμα-βήμα διαδικασία δοκιμών:
-
Ξεκινήστε τον backend server σας:
cd backend source venv/bin/activate # ή venv\Scripts\activate στα Windows python api.py -
Επιβεβαιώστε ότι το API λειτουργεί:
- Ανοίξτε το
http://localhost:5000στον περιηγητή σας - Θα δείτε το μήνυμα καλωσορίσματος από τον FastAPI server σας
- Ανοίξτε το
-
Ανοίξτε το frontend σας:
- Πλοηγηθείτε στον φάκελο του frontend
- Ανοίξτε το
index.htmlστον web browser σας - Ή χρησιμοποιήστε την επέκταση Live Server του VS Code για καλύτερη εμπειρία ανάπτυξης
-
Δοκιμάστε τη λειτουργικότητα συνομιλίας:
- Πληκτρολογήστε ένα μήνυμα στο πεδίο εισόδου
- Κλικ στο "Αποστολή" ή πατήστε Enter
- Επιβεβαιώστε ότι το AI αποκρίνεται σωστά
- Ελέγξτε την κονσόλα περιηγητή για πιθανά σφάλματα JavaScript
Αντιμετώπιση Συνηθισμένων Προβλημάτων
| Πρόβλημα | Συμπτώματα | Λύση |
|---|---|---|
| Σφάλμα CORS | Το frontend δεν μπορεί να φτάσει το backend | Εξασφαλίστε ότι ο FastAPI CORSMiddleware είναι σωστά ρυθμισμένος |
| Σφάλμα Κλειδιού API | Απαντήσεις 401 Unauthorized | Ελέγξτε τη μεταβλητή περιβάλλοντος GITHUB_TOKEN |
| Απόρριψη Σύνδεσης | Σφάλματα δικτύου στο frontend | Επαληθεύστε το URL του backend και ότι ο Flask server τρέχει |
| Καμία Απάντηση AI | Κενές ή σφάλματα απάντησης | Ελέγξτε τα logs του backend για προβλήματα περιορισμών API ή αυθεντικοποίησης |
Συνηθισμένα βήματα debugging:
- Ελέγχει την κονσόλα εργαλείων προγραμματιστών για σφάλματα JavaScript
- Επιβεβαιώνει στο δίκτυο (Network tab) ότι οι κλήσεις API είναι επιτυχείς
- Ανασκοπεί τα αρχεία καταγραφής backend για σφάλματα Python ή προβλήματα API
- Επιβεβαιώνει ότι οι μεταβλητές περιβάλλοντος φορτώνονται σωστά και είναι προσβάσιμες
📈 Χρονοδιάγραμμα Mastery Ανάπτυξης Εφαρμογής AI
timeline
title Ολοκληρωμένο Ταξίδι Ανάπτυξης Εφαρμογής AI
section Θεμέλια AI
Κατανόηση Γενετικού AI
: Κατανοήστε έννοιες αναγνώρισης προτύπων
: Εξοικειωθείτε με τον έλεγχο παραμέτρων AI
: Μάθετε τεχνικές μηχανικής προτροπής
Ενσωμάτωση Μοντέλων GitHub
: Πλοηγηθείτε σε πλατφόρμες υπηρεσιών AI
: Διαχειριστείτε την ταυτοποίηση με ασφάλεια
: Βελτιστοποιήστε τις παραμέτρους μοντέλου
section Ανάπτυξη Backend
Αρχιτεκτονική Python API
: Δημιουργήστε εφαρμογές FastAPI
: Υλοποιήστε ασύγχρονες λειτουργίες
: Δημιουργήστε ασφαλή σημεία πρόσβασης
Ενσωμάτωση Υπηρεσίας AI
: Συνδεθείτε με εξωτερικά API AI
: Διαχειριστείτε περιορισμούς ρυθμού
: Υλοποιήστε όρια σφαλμάτων
section Εμπειρία Frontend
Σύγχρονα Πρότυπα JavaScript
: Εξοικειωθείτε με την αρχιτεκτονική κλάσεων ES6
: Υλοποιήστε ροές async/await
: Δημιουργήστε ευέλικτες διεπαφές
Πραγματική Εμπειρία Χρήστη
: Δημιουργήστε δυναμικές διεπαφές συνομιλίας
: Διαχειριστείτε καταστάσεις φόρτωσης
: Βελτιστοποιήστε τις αλληλεπιδράσεις χρήστη
section Ετοιμότητα Παραγωγής
Ασφάλεια & Απόδοση
: Υλοποιήστε ασφαλή διαχείριση διακριτικών
: Αποφύγετε ευπάθειες XSS
: Βελτιστοποιήστε την απόδοση API
Επαγγελματική Ανάπτυξη
: Δημιουργήστε κλιμακούμενες αρχιτεκτονικές
: Δημιουργήστε συντηρήσιμο κώδικα
: Τεκμηριώστε διαδικασίες ανάπτυξης
🎓 Ορόσημο Αποφοίτησης: Έχετε δημιουργήσει με επιτυχία μια πλήρη εφαρμογή με υποστήριξη AI χρησιμοποιώντας τις ίδιες τεχνολογίες και αρχιτεκτονικά μοτίβα που χρησιμοποιούν σύγχρονοι βοηθοί AI. Αυτές οι δεξιότητες βρίσκονται στο σταυροδρόμι της παραδοσιακής ανάπτυξης web και της αιχμής ενσωμάτωσης AI.
🔄 Δυνατότητες Επόμενου Επιπέδου:
- Έτοιμοι να εξερευνήσετε προηγμένα πλαίσια AI (LangChain, LangGraph)
- Προετοιμασμένοι να δημιουργήσετε πολυτροπικές AI εφαρμογές (κείμενο, εικόνα, φωνή)
- Εξοπλισμένοι να υλοποιήσετε βάσεις δεδομένων vector και συστήματα ανάκτησης
- Έχοντας θεμέλια για μηχανική μάθηση και προσαρμογή μοντέλων AI
Πρόκληση GitHub Copilot Agent 🚀
Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση:
Περιγραφή: Βελτιώστε τον βοηθό συνομιλίας προσθέτοντας ιστορικό συνομιλιών και επιμονή μηνυμάτων. Αυτή η πρόκληση θα σας βοηθήσει να κατανοήσετε πώς να διαχειρίζεστε κατάσταση σε εφαρμογές συνομιλίας και να υλοποιήσετε αποθήκευση δεδομένων για καλύτερη εμπειρία χρήστη.
Προτροπή: Τροποποιήστε την εφαρμογή συνομιλίας για να περιλαμβάνει ιστορικό συνομιλιών που διατηρείται μεταξύ των συνεδριών. Προσθέστε λειτουργία αποθήκευσης μηνυμάτων στο τοπικό αποθηκευτικό χώρο, εμφάνιση ιστορικού συνομιλιών κατά τη φόρτωση της σελίδας, και ένα κουμπί "Καθαρισμός Ιστορικού". Επίσης υλοποιήστε ενδείξεις πληκτρολόγησης και χρονικές σημάνσεις μηνυμάτων για πιο ρεαλιστική εμπειρία συνομιλίας.
Μάθετε περισσότερα για τη λειτουργία agent εδώ.
Ανάθεση: Δημιουργήστε τον Προσωπικό σας Βοηθό AI
Τώρα θα φτιάξετε τη δική σας υλοποίηση βοηθού AI. Αντί να αντιγράψετε απλά τον κώδικα του tutorial, αυτή είναι μια ευκαιρία να εφαρμόσετε τις έννοιες δημιουργώντας κάτι που αντανακλά τα δικά σας ενδιαφέροντα και σενάρια χρήσης.
Απαιτήσεις Έργου
Ας οργανώσουμε το έργο σας με μια καθαρή, οργανωμένη δομή:
my-ai-assistant/
├── backend/
│ ├── api.py # Your FastAPI server
│ ├── llm.py # AI integration functions
│ ├── .env # Your secrets (keep this safe!)
│ └── requirements.txt # Python dependencies
├── frontend/
│ ├── index.html # Your chat interface
│ ├── app.js # The JavaScript magic
│ └── styles.css # Make it look amazing
└── README.md # Tell the world about your creation
Βασικά Καθήκοντα Υλοποίησης
Ανάπτυξη Backend:
- Πάρτε τον κώδικα FastAPI και κάντε τον δικό σας
- Δημιουργήστε μια μοναδική προσωπικότητα AI – π.χ. βοηθό μαγειρικής, συνεργάτη δημιουργικής γραφής ή παρέα για μελέτη
- Προσθέστε στιβαρή διαχείριση σφαλμάτων ώστε η εφαρμογή να μην καταρρέει σε λάθη
- Γράψτε σαφή τεκμηρίωση για όποιον θέλει να καταλάβει πώς λειτουργεί το API σας
Ανάπτυξη Frontend:
- Κατασκευάστε ένα περιβάλλον συνομιλίας που να είναι εύχρηστο και φιλόξενο
- Γράψτε καθαρό, σύγχρονο JavaScript που θα είστε περήφανοι να δείξετε σε άλλους προγραμματιστές
- Σχεδιάστε custom στυλ που να αντανακλούν την προσωπικότητα του AI σας – διασκεδαστικό και πολύχρωμο; Καθαρό και μινιμαλιστικό; Απόλυτα δικό σας!
- Βεβαιωθείτε ότι λειτουργεί άριστα και σε κινητά και σε υπολογιστές
Απαιτήσεις Προσωποποίησης:
- Επιλέξτε μοναδικό όνομα και προσωπικότητα για τον βοηθό AI – ίσως κάτι που αντανακλά τα ενδιαφέροντά σας ή τα προβλήματα που θέλετε να λύσετε
- Προσαρμόστε το οπτικό σχεδιασμό ώστε να ταιριάζει στη διάθεση του βοηθού σας
- Γράψτε ένα ελκυστικό μήνυμα καλωσορίσματος που να κάνει τους χρήστες να θέλουν να ξεκινήσουν τη συνομιλία
- Δοκιμάστε τον βοηθό σας με διάφορες ερωτήσεις για να δείτε πώς αντιδρά
Ιδέες για Βελτιώσεις (Προαιρετικό)
Θέλετε να πάτε το έργο σας στο επόμενο επίπεδο; Εδώ μερικές διασκεδαστικές ιδέες προς εξερεύνηση:
| Χαρακτηριστικό | Περιγραφή | Δεξιότητες που θα Εξασκηθείτε |
|---|---|---|
| Ιστορικό Μηνυμάτων | Θυμάται συνομιλίες ακόμη και μετά το refresh σελίδας | Εργασία με localStorage, χειρισμός JSON |
| Ενδείξεις Πληκτρολόγησης | Δείχνει "AI πληκτρολογεί..." ενώ περιμένει απαντήσεις | Κινήσεις CSS, ασύγχρονος προγραμματισμός |
| Χρονικές Σημάνσεις Μηνυμάτων | Δείχνει πότε στάλθηκε κάθε μήνυμα | Μορφοποίηση ημερομηνίας/ώρας, σχεδιασμός UX |
| Εξαγωγή Συνομιλίας | Επιτρέπει στους χρήστες να κατεβάσουν τη συνομιλία τους | Χειρισμός αρχείων, εξαγωγή δεδομένων |
| Εναλλαγή Θέματος | Εναλλαγή φωτεινής/σκοτεινής λειτουργίας | Μεταβλητές CSS, προτιμήσεις χρήστη |
| Φωνητική Εισαγωγή | Προσθήκη λειτουργίας φωνής σε κείμενο | Web APIs, προσβασιμότητα |
Δοκιμές και Τεκμηρίωση
Διασφάλιση Ποιότητας:
- Δοκιμάστε την εφαρμογή με διάφορα τύπους εισόδου και ακραίες περιπτώσεις
- Επιβεβαιώστε ότι ο σχεδιασμός ανταποκρίνεται καλά σε διαφορετικά μεγέθη οθόνης
- Ελέγξτε την προσβασιμότητα με πλοήγηση πληκτρολογίου και screen readers
- Επικυρώστε HTML και CSS για συμβατότητα με πρότυπα
Απαιτήσεις Τεκμηρίωσης:
- Γράψτε ένα README.md που εξηγεί το έργο και πώς να το τρέξετε
- Συμπεριλάβετε στιγμιότυπα οθόνης του περιβάλλοντος συνομιλίας σε δράση
- Τεκμηριώστε τυχόν μοναδικά χαρακτηριστικά ή προσαρμογές
- Παρέχετε σαφείς οδηγίες εγκατάστασης για άλλους προγραμματιστές
Οδηγίες Υποβολής
Παραδοτέα Έργου:
- Ο φάκελος με όλο τον πηγαίο κώδικα
- README.md με περιγραφή του έργου και οδηγίες εγκατάστασης
- Στιγμιότυπα οθόνης που εμφανίζουν τον βοηθό συνομιλίας σε δράση
- Σύντομη ανασκόπηση σχετικά με το τι μάθατε και τις προκλήσεις που αντιμετωπίσατε
Κριτήρια Αξιολόγησης:
- Λειτουργικότητα: Λειτουργεί ο βοηθός συνομιλίας όπως αναμένεται;
- Ποιότητα Κώδικα: Είναι ο κώδικας καλά οργανωμένος, σχολιασμένος και εύκολα συντηρήσιμος;
- Σχεδίαση: Είναι το περιβάλλον οπτικά ελκυστικό και εύκολο στη χρήση;
- Δημιουργικότητα: Πόσο μοναδική και προσωποποιημένη είναι η υλοποίηση σας;
- Τεκμηρίωση: Είναι οι οδηγίες εγκατάστασης σαφείς και πλήρεις;
💡 Συμβουλή Επιτυχίας: Ξεκινήστε με τις βασικές απαιτήσεις, μετά προσθέστε βελτιώσεις όταν όλα λειτουργούν. Δώστε προτεραιότητα σε μια ολοκληρωμένη βασική εμπειρία πριν από τα προχωρημένα χαρακτηριστικά.
Λύση
Πρόσθετες Προκλήσεις
Έτοιμοι να πάρετε τον βοηθό AI σας στο επόμενο επίπεδο; Δοκιμάστε αυτές τις προχωρημένες προκλήσεις που θα ενισχύσουν την κατανόηση της ενσωμάτωσης AI και της ανάπτυξης web.
Προσωποποίηση Προσωπικότητας
Η πραγματική μαγεία συμβαίνει όταν δίνετε στον βοηθό AI σας μια μοναδική προσωπικότητα. Πειραματιστείτε με διαφορετικές system prompts για να δημιουργήσετε εξειδικευμένους βοηθούς:
Παράδειγμα Επαγγελματικού Βοηθού:
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
Παράδειγμα Βοηθού Δημιουργικής Γραφής:
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
Παράδειγμα Τεχνικού Μέτορα:
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
Βελτιώσεις Frontend
Μεταμορφώστε το περιβάλλον συνομιλίας σας με αυτές τις οπτικές και λειτουργικές βελτιώσεις:
Προηγμένα Χαρακτηριστικά CSS:
- Εφαρμόστε ομαλές κινήσεις/μεταβάσεις μηνυμάτων
- Προσθέστε custom σχεδιασμούς για τα «φουσκωτά» της συνομιλίας με σχήματα και gradients CSS
- Δημιουργήστε κινούμενη ένδειξη πληκτρολόγησης όταν το AI «σκέφτεται»
- Σχεδιάστε αντιδράσεις με emoji ή σύστημα αξιολόγησης μηνυμάτων
Βελτιώσεις JavaScript:
- Προσθέστε συντομεύσεις πληκτρολογίου (Ctrl+Enter για αποστολή, Escape για καθάρισμα)
- Υλοποιήστε αναζήτηση και φίλτρο μηνυμάτων
- Δημιουργήστε λειτουργία εξαγωγής συνομιλίας (λήψη σε αρχείο κειμένου ή JSON)
- Προσθέστε αυτόματη αποθήκευση στο localStorage για αποφυγή απώλειας μηνυμάτων
Προηγμένη Ενσωμάτωση AI
Πολλαπλές Προσωπικότητες AI:
- Δημιουργήστε ένα dropdown για επιλογή διαφορετικών προσωπικοτήτων AI
- Αποθηκεύστε την προτίμηση χρήστη στο localStorage
- Υλοποιήστε εναλλαγή context που διατηρεί τη ροή της συνομιλίας
Έξυπνα Χαρακτηριστικά Απαντήσεων:
-
Προσθέστε επίγνωση περιβάλλοντος συνομιλίας (το AI θυμάται προηγούμενα μηνύματα)
-
Υλοποιήστε έξυπνες προτάσεις βασισμένες στο θέμα της συνομιλίας
-
Δημιουργήστε κουμπιά γρήγορης απάντησης για κοινές ερωτήσεις
🎯 Στόχος Μάθησης: Αυτές οι επιπλέον προκλήσεις σας βοηθούν να κατανοήσετε προχωρημένα μοτίβα ανάπτυξης ιστοσελίδων και τεχνικές ενσωμάτωσης τεχνητής νοημοσύνης που χρησιμοποιούνται σε εφαρμογές παραγωγής.
Περίληψη και Επόμενα Βήματα
Συγχαρητήρια! Έχετε δημιουργήσει με επιτυχία έναν ολοκληρωμένο βοηθό συνομιλίας με τεχνητή νοημοσύνη από το μηδέν. Αυτό το έργο σας προσέφερε πρακτική εμπειρία με σύγχρονες τεχνολογίες ανάπτυξης ιστοσελίδων και ενσωμάτωσης AI – δεξιότητες που γίνονται ολοένα και πιο πολύτιμες στο σημερινό τεχνολογικό τοπίο.
Τι Καταφέρατε
Καθ’ όλη τη διάρκεια αυτού του μαθήματος, έχετε αποκτήσει εμπειρία σε πολλές βασικές τεχνολογίες και έννοιες:
Ανάπτυξη Backend:
- Έχετε ενσωματώσει το GitHub Models API για λειτουργικότητα AI
- Έχετε δημιουργήσει ένα RESTful API με Flask με κατάλληλο χειρισμό σφαλμάτων
- Έχετε υλοποιήσει ασφαλή αυθεντικοποίηση χρησιμοποιώντας μεταβλητές περιβάλλοντος
- Έχετε ρυθμίσει CORS για αιτήματα μεταξύ frontend και backend
Ανάπτυξη Frontend:
- Έχετε δημιουργήσει μια ευέλικτη διεπαφή συνομιλίας με σημασιολογικό HTML
- Έχετε υλοποιήσει σύγχρονο JavaScript με async/await και αρχιτεκτονική βασισμένη σε κλάσεις
- Έχετε σχεδιάσει μια ελκυστική διεπαφή χρήστη με CSS Grid, Flexbox και animations
- Έχετε προσθέσει λειτουργίες προσβασιμότητας και αρχές ευέλικτου σχεδιασμού
Πλήρης Ενοποίηση Stack:
- Έχετε συνδέσει το frontend και backend μέσω κλήσεων HTTP API
- Έχετε διαχειριστεί αλληλεπιδράσεις χρήστη σε πραγματικό χρόνο και ασύγχρονη ροή δεδομένων
- Έχετε υλοποιήσει χειρισμό σφαλμάτων και ανατροφοδότηση χρήστη σε ολόκληρη την εφαρμογή
- Έχετε δοκιμάσει τη ροή εργασίας της εφαρμογής από την είσοδο χρήστη ως την απάντηση AI
Κύρια Μαθησιακά Αποτελέσματα
mindmap
root((Δεξιότητες Εφαρμογής Συνομιλίας AI))
API Integration
Authentication
Error Handling
Async Programming
Web Development
HTML5 Semantics
Modern CSS
ES6+ JavaScript
User Experience
Responsive Design
Accessibility
Real-time Interaction
AI Understanding
Prompt Engineering
Model Parameters
Conversation Flow
Αυτό το έργο σας εισήγαγε στα βασικά της κατασκευής εφαρμογών με τεχνητή νοημοσύνη, που αποτελούν το μέλλον της ανάπτυξης διαδικτύου. Τώρα κατανοείτε πώς να ενσωματώνετε δυνατότητες AI σε παραδοσιακές ιστιοσελίδες, δημιουργώντας ελκυστικές εμπειρίες χρήστη που είναι έξυπνες και άμεσες.
Επαγγελματικές Εφαρμογές
Οι δεξιότητες που έχετε αναπτύξει σε αυτό το μάθημα εφαρμόζονται άμεσα σε σύγχρονες καριέρες ανάπτυξης λογισμικού:
- Ολοκληρωμένη ανάπτυξη web χρησιμοποιώντας σύγχρονα frameworks και APIs
- Ενσωμάτωση AI σε web εφαρμογές και mobile apps
- Σχεδιασμός και ανάπτυξη API για αρχιτεκτονικές μικροϋπηρεσιών
- Ανάπτυξη διεπαφής χρήστη με έμφαση στην προσβασιμότητα και τον ευέλικτο σχεδιασμό
- Πρακτικές DevOps περιλαμβάνοντας ρύθμιση περιβάλλοντος και ανάπτυξη
Συνεχίζοντας το Ταξίδι της Ανάπτυξης AI
Επόμενα Βήματα Μάθησης:
- Εξερευνήστε πιο προχωρημένα AI μοντέλα και APIs (GPT-4, Claude, Gemini)
- Μάθετε τεχνικές prompt engineering για καλύτερες απαντήσεις AI
- Μελετήστε το σχεδιασμό συνομιλίας και τις αρχές εμπειρίας χρήστη chatbot
- Ερευνήστε θέματα ασφάλειας AI, ηθικής και υπεύθυνης ανάπτυξης AI
- Δημιουργήστε πιο σύνθετες εφαρμογές με μνήμη συνομιλίας και επίγνωση συμφραζομένων
Ιδέες Για Προχωρημένα Έργα:
- Δωμάτια πολλαπλών χρηστών με AI διαμεσολάβηση
- Chatbots εξυπηρέτησης πελατών με AI
- Εκπαιδευτικοί βοηθοί με εξατομικευμένη μάθηση
- Συνεργάτες δημιουργικής γραφής με διαφορετικές προσωπικότητες AI
- Βοηθοί τεχνικής τεκμηρίωσης για προγραμματιστές
Ξεκινώντας με το GitHub Codespaces
Θέλετε να δοκιμάσετε αυτό το έργο σε ένα περιβάλλον ανάπτυξης στο cloud; Το GitHub Codespaces παρέχει μια πλήρη ρύθμιση ανάπτυξης στο πρόγραμμα περιήγησής σας, ιδανική για πειραματισμό με εφαρμογές AI χωρίς τοπική εγκατάσταση.
Ρύθμιση του Αναπτυξιακού Περιβάλλοντός Σας
Βήμα 1: Δημιουργία από Πρότυπο
- Πλοηγηθείτε στο Web Dev For Beginners αποθετήριο
- Κάντε κλικ στο "Use this template" στην πάνω δεξιά γωνία (βεβαιωθείτε ότι έχετε συνδεθεί στο GitHub)
Βήμα 2: Εκκίνηση Codespaces
- Ανοίξτε το νεοδημιουργημένο αποθετήριο σας
- Κάντε κλικ στο πράσινο κουμπί "Code" και επιλέξτε "Codespaces"
- Επιλέξτε "Create codespace on main" για να ξεκινήσετε το αναπτυξιακό σας περιβάλλον
Βήμα 3: Ρύθμιση Περιβάλλοντος
Μόλις φορτώσει ο Codespace σας, θα έχετε πρόσβαση σε:
- Προεγκατεστημένα Python, Node.js και όλα τα απαραίτητα εργαλεία ανάπτυξης
- Περιβάλλον VS Code με επεκτάσεις για ανάπτυξη ιστοσελίδων
- Πρόσβαση στο τερματικό για εκτέλεση backend και frontend servers
- Προώθηση θυρών για δοκιμή των εφαρμογών σας
Τι προσφέρει το Codespaces:
- Εξαλείφει τα ζητήματα τοπικής ρύθμισης και διαμόρφωσης περιβάλλοντος
- Παρέχει συνεπές περιβάλλον ανάπτυξης σε διάφορες συσκευές
- Περιλαμβάνει προρυθμισμένα εργαλεία και επεκτάσεις για ανάπτυξη web
- Προσφέρει ομαλή ενοποίηση με το GitHub για έλεγχο έκδοσης και συνεργασία
🚀 Επαγγελματική Συμβουλή: Το Codespaces είναι ιδανικό για μάθηση και πρωτοτυπία εφαρμογών AI καθώς αναλαμβάνει αυτόματα τη διαχείριση της πολύπλοκης ρύθμισης περιβάλλοντος, επιτρέποντάς σας να επικεντρωθείτε στην κατασκευή και τη μάθηση αντί για την επίλυση προβλημάτων διαμόρφωσης.
Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI Co-op Translator. Παρότι καταβάλουμε προσπάθεια για ακρίβεια, παρακαλούμε να λάβετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη φυσική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.