Η αναμέτρηση των τεσσάρων κορυφαίων μοντέλων! Μια κριτική που δείχνει πόσο ισχυρό είναι το Deepseek R1

Τις τελευταίες ημέρες, το Deepseek-R1 0528 έχει διατεθεί επίσημα σε λογισμικό ανοιχτού κώδικα.

Στο LiveCodeBench, η απόδοσή του είναι σχεδόν εφάμιλλη με το o3 (υψηλή) του OpenAI. Στο πολυγλωσσικό benchmark test του Aider, συγκρίνεται με τον Claude Opus.

Όταν κυκλοφόρησε στην επίσημη ιστοσελίδα, δοκιμάσαμε γρήγορα τις δυνατότητές του στο front-end και τις διαπιστώσαμε εξαιρετικά ισχυρές, κάτι που οδήγησε στις δοκιμές που καλύπτονται σε αυτό το άρθρο. Στόχος μας είναι να μοιραστούμε μαζί σας την συγκεκριμένη απόδοση διαφορετικών μοντέλων.

Είναι σημαντικό να σημειωθεί ότι αυτή η δοκιμή εστιάζει κυρίως στις δυνατότητες του front-end, επομένως είναι απαραίτητο να εξετάσετε αντικειμενικά την απόδοση των διαφόρων μοντέλων. Μπορείτε να χρησιμοποιήσετε τις οδηγίες που παρέχουμε για να διεξάγετε τις δικές σας δοκιμές και να μοιραστείτε τις γνώσεις και τα ευρήματά σας.

Χρησιμοποιώντας την ίδια προτροπή, το στείλαμε στα Claude Opus 4, Sonnet 4, Gemini 2.5 Pro, και DeepSeek R1-0528, και τους έβαλε να ανταγωνιστούν σε έξι ολοένα και πιο απαιτητικές εργασίες ανάπτυξης front-end.

Για όσους ανυπομονούν, ιδού το συμπέρασμα:

Το Deepseek-R1-0528 υπολείπεται ελαφρώς του Opus 4 σε δυνατότητες front-end, αλλά έχει καλύτερες επιδόσεις. Σονέτο 4 και Gemini 2.5 Pro.

Βασικά, οποιαδήποτε εργασία μπορεί να ολοκληρώσει το Opus, μπορεί επίσης να ολοκληρώσει το R1, και ακόμη και εργασίες που δεν μπορεί να ολοκληρώσει το Opus 4, το R1 μπορεί να χειριστεί, αν και με ελαφρώς χαμηλότερα ποσοστά ολοκλήρωσης και ποιότητα αποτελέσματος.

Λαμβάνοντας υπόψη τη διαφορά τιμής μεταξύ του R1 και των άλλων τριών, αυτή η απόδοση είναι ήδη εξαιρετική και μπορούμε μόνο να φανταστούμε πόσο εντυπωσιακό θα είναι το R2.

Δοκιμή 1: Σύστημα Διαχείρισης Αποθήκης

Ερώτηση: Παρακαλώ βοηθήστε με να δημιουργήσω ένα πλήρες διαδικτυακό εργαλείο διαχείρισης προϊόντων με τις ακόλουθες απαιτήσεις:

Λειτουργικές απαιτήσεις

1. Διαχείριση Προϊόντων

• Εισαγωγή πληροφοριών προϊόντος: Όνομα προϊόντος, τύπος/κατηγορία, αριθμός SKU, τιμή, ποσότητα αποθέματος
• Διαχείριση εικόνας προϊόντοςΥποστήριξη μεταφόρτωσης και προεπισκόπησης εικόνων (προσομοίωση με επιλογέα αρχείων)
• Εμφάνιση λίστας προϊόντων: Εμφάνιση όλων των προϊόντων σε μορφή πίνακα, με υποστήριξη αναζήτησης και φιλτραρίσματος
• Επεξεργασία προϊόντοςΥποστήριξη τροποποίησης πληροφοριών προϊόντος
• Διαγραφή προϊόντος: Υποστήριξη διαγραφής προϊόντος (με προτροπή επιβεβαίωσης)

2. Διαχείριση αποθεμάτων

• Εισερχόμενες λειτουργίες: Αύξηση της ποσότητας αποθέματος προϊόντων, καταγραφή του χρόνου και της ποσότητας εισερχόμενων εισροών
• Εξερχόμενες δραστηριότητες: Μείωση της ποσότητας αποθέματος προϊόντων, καταγραφή του χρόνου και της ποσότητας εξερχόμενων προϊόντων
• Αρχεία απογραφής: Εμφανίζει το ιστορικό αλλαγών αποθέματος για κάθε προϊόν

3. Χαρακτηριστικά διεπαφής

• Ταμπλό: Εμφανίζει στατιστικά στοιχεία όπως ο συνολικός αριθμός προϊόντων, η συνολική αξία αποθέματος, οι ειδοποιήσεις χαμηλού αποθέματος κ.λπ.
• Σχεδιασμός με δυνατότητα απόκρισης: Προσαρμόσιμο σε επιτραπέζιους και φορητούς υπολογιστές
• Διατήρηση δεδομένωνΧρησιμοποιεί το localStorage για την αποθήκευση δεδομένων

Τεχνικές απαιτήσεις

Στυλ και εικονίδια

• Πλαίσιο CSSΧρησιμοποιεί το TailwindCSS 3.0+ CDN
• Βιβλιοθήκη εικονιδίωνΧρησιμοποιεί Heroicons ή Feather Icons CDN
• Γραμματοσειρά: Χρήση γραμματοσειρών Google

Δομή κώδικα

• Εφαρμογή μίας σελίδας: HTML + CSS + JavaScript
• Αρθρωτός σχεδιασμός: Ανάλυση συναρτήσεων σε διαφορετικές ενότητες JavaScript
• Μορφή δεδομένωνΧρησιμοποιήστε τη μορφή JSON για την αποθήκευση δεδομένων προϊόντος

Απαιτήσεις Σχεδιασμού Διεπαφής

• Σύγχρονο περιβάλλον χρήστη: Απλός και όμορφος σχεδιασμός διεπαφής
• Χρωματικό σχέδιοΧρησιμοποιήστε επαγγελματικούς χρωματικούς συνδυασμούς για επιχειρήσεις
• Διαδραστική ανατροφοδότηση: Κλικ κουμπιών, επικύρωση φόρμας και άλλα διαδραστικά εφέ
• Επικύρωση φόρμας: Απαιτούμενη επικύρωση πεδίου, επικύρωση μορφής δεδομένων

Παράδειγμα Δομής Δεδομένων

Δημιουργήστε ένα πλήρες αρχείο HTML που περιέχει όλο τον απαραίτητο κώδικα CSS και JavaScript, διασφαλίζοντας ότι όλες οι λειτουργίες είναι λειτουργικές και μπορούν να εκτελεστούν απευθείας σε ένα πρόγραμμα περιήγησης.

Ας ρίξουμε μια ματιά στα αποτελέσματα των δοκιμών. Η λογική είναι στην πραγματικότητα αρκετά περίπλοκη, δοκιμάζοντας το μήκος του πλαισίου, την αισθητική και τις δυνατότητες λογικής επεξεργασίας του μοντέλου.

Σε αυτήν την περίπτωση, όλα τα μοντέλα εκτός από το Deepseek απέτυχαν. Μετάφραση του Κλοντ 4 ήταν αρκετά άστοχο, για να είμαι ειλικρινής.

Deepseek-R1-0528: Η αναβαθμισμένη έκδοση του R1 είναι πολύ ισχυρή. Όπως μπορείτε να δείτε, η διεπαφή είναι πολύ επαγγελματική και μπορείτε επίσης να δημιουργήσετε νέα προϊόντα, να εκτελέσετε κανονικές εξερχόμενες και εισερχόμενες λειτουργίες και να διαιρέσετε τις αναφορές προϊόντων, διαχείρισης αποθεμάτων και αποθεμάτων σε τρεις σελίδες, κάτι που είναι πολύ σαφές συνολικά. Υπάρχει επίσης μια ειδική σελίδα πίνακα ελέγχου και έγραψε ορισμένα δείγματα δεδομένων για δοκιμή. Τα άλλα μοντέλα δεν έχουν δεδομένα και η προσθήκη προϊόντων δεν λειτουργεί, επομένως η δοκιμή είναι εντελώς αδύνατη.

Κλοντ Έργο 4: Ξεκινά με μια μεγάλη διεπαφή, πολύ απλή, που χρησιμοποιεί μια επάνω γραμμή πλοήγησης αντί για την πλαϊνή γραμμή που είναι συνηθισμένη στις πλατφόρμες SaaS. Η προσθήκη προϊόντων έχει ως αποτέλεσμα σφάλμα κατά την αποθήκευση, καθιστώντας αδύνατη τη δοκιμή.

Κλοντ Σονέτο 4: Σε σύγκριση με το Opus 4, η διεπαφή είναι ακόμη πιο βασική. Κάνοντας κλικ στο κουμπί «Προσθήκη προϊόντος» δεν αποκρίνεται και δεν εμφανίζεται κανένα αναδυόμενο παράθυρο φόρμας. Οι άλλες σελίδες είναι ουσιαστικά απλώς placeholder.

Gemini 2.5 Pro: Η έκδοση της Google είναι καλύτερη από αυτή του Claude. Επιτρέπει την προσθήκη προϊόντων και εκτελέσεων, αλλά υπάρχουν σφάλματα. Λειτούργησε όταν το δοκίμασα για πρώτη φορά, αλλά όχι όταν ηχογράφησα ένα βίντεο. Ωστόσο, ο σχεδιασμός αλληλεπίδρασης του Gemini είναι αρκετά περίπλοκος, με τη διαχείριση αποθεμάτων και την τήρηση αρχείων όλα σε έναν πίνακα, γεγονός που προσθέτει κάποια δυσκολία.

Δοκιμή 2: Επεξεργαστής κινούμενων εικόνων pixel

Στη συνέχεια, γίνεται μια δοκιμασία οπτικών ικανοτήτων. Τους ζήτησα να δημιουργήσουν έναν επεξεργαστή κινουμένων σχεδίων pixel art χρησιμοποιώντας το P5.js, υποστηρίζοντας λειτουργίες κίνησης, προσαρμόζοντας σχήματα σημείων, μεγέθη, ταχύτητες και άλλες συνθήκες.

Προτροπή: Δημιουργήστε μια γεννήτρια διαδραστικής κινούμενης εικόνας pixel art πλήρους οθόνης βασισμένη στο P5.js, η οποία να πληροί τις ακόλουθες τεχνικές απαιτήσεις:

Βασικά χαρακτηριστικά

• Υλοποιήστε animation pixel art πλήρους οθόνης χρησιμοποιώντας το P5.js, με το animation να καλύπτει ολόκληρη την περιοχή προβολής
• Η συνολική επιφάνεια του πλέγματος των pixel πρέπει να είναι τουλάχιστον 10 φορές μεγαλύτερη από την ορατή επιφάνεια για να εξασφαλιστεί πλήρης κάλυψη ακόμη και στη μικρότερη απόσταση μεταξύ των pixel.
• Παρέχετε πολλαπλές λειτουργίες κίνησης: Κύμα, Παλμός, Κυματισμός, Θόρυβος
• Υποστήριξη πολλαπλών επιλογών σχήματος σημείων: κύκλος, τετράγωνο, σταυρός, τρίγωνο, διαμάντι, κ.λπ.
• Όλοι οι πίνακες ελέγχου βρίσκονται στη δεξιά πλευρά της σελίδας και μπορούν να συμπτυχθούν στο κάτω μέρος σε κινητές συσκευές.

Ρυθμιζόμενες παράμετροι

• Πυκνότητα κουκκίδων: Ελέγξτε τον αριθμό των κουκκίδων ανά γραμμή/στήλη
• Μέγεθος σχήματος: Προσαρμόστε το μέγεθος των κουκκίδων
• Ταχύτητα κίνησης: Ελέγξτε την ταχύτητα και το πλάτος του εφέ κίνησης
• Απόσταση πλέγματος: Προσαρμόστε την απόσταση μεταξύ των κουκκίδων

Τεχνικές προδιαγραφές

• Χρησιμοποιήστε HTML5, TailwindCSS 3.0+ (που εισήχθη μέσω CDN) και P5.js
• Υλοποίηση πλήρους λειτουργικότητας εναλλαγής σκοτεινής/φωτεινής λειτουργίας, με προεπιλεγμένες ρυθμίσεις συστήματος
• Ο κώδικας πρέπει να περιλαμβάνει λογική βελτιστοποίησης απόδοσης, αποδίδοντας μόνο σημεία εντός της ορατής περιοχής και κοντά στις άκρες.
• Οι κινούμενες εικόνες πρέπει να εκτελούνται ομαλά χωρίς καθυστερήσεις

Σχεδιασμός με δυνατότητα απόκρισης

• Οι σελίδες πρέπει να εμφανίζονται τέλεια σε όλες τις συσκευές (κινητά, tablet, υπολογιστές)
• Οι πίνακες ελέγχου θα πρέπει να είναι πτυσσόμενοι/επεκτάσιμοι στην προβολή για κινητά
• Βελτιστοποιήστε τη διάταξη και τα μεγέθη γραμματοσειρών για διαφορετικά μεγέθη οθόνης
• Εξασφαλίστε μια καλή εμπειρία αφής σε κινητές συσκευές

Στοιχεία διεπαφής

• Επιλογέας λειτουργίας κίνησης (κύμα, παλμός, κυματισμός, θόρυβος)
• Επιλογέας σχήματος (εμφανίζει διάφορα σχήματα με εικονίδια)
• Στοιχεία ελέγχου ρυθμιστικού: πυκνότητα, μέγεθος, ταχύτητα, απόσταση
• Κουμπί εναλλαγής θέματος
• Εμφάνιση πληροφοριών επικάλυψης πίνακα και συνολικού αριθμού σημείων

Ρίξτε μια ματιά στα αποτελέσματα. Για να είμαι ειλικρινής, δεν περίμενα ότι τα άλλα μοντέλα θα είχαν τόσο κακή απόδοση σε αυτή τη δοκιμή. Εκτός από το Deepseek-R1, τα κινούμενα σχέδια των άλλων μοντέλων δεν λειτούργησαν καθόλου.

Deepseek-R1-0528: Άψογο. Κάθε κουμπί και ρυθμιστικό λειτουργεί κανονικά και τα σημεία κινούνται ομαλά. Προστέθηκαν ακόμη και δεδομένα dot matrix και τα χρώματα παραμένουν σταθερά μετά την εναλλαγή σε νυχτερινή λειτουργία. Το μόνο μικρό πρόβλημα είναι ότι η επιλεγμένη κατάσταση της επιλογής χρώματος έχει ένα μικρό πρόβλημα, αλλά αυτό είναι αμελητέο σε σύγκριση με την καταστροφική απόδοση των άλλων μοντέλων.

Κλοντ Έργο 4: Καλά νέα: έχει pixel art. Κακά νέα: δεν κινείται. Το περιεχόμενο στη δεξιά πλευρά μπορεί να λειτουργήσει κανονικά, αλλά το χρωματικό σχήμα είναι λανθασμένο μετά την εναλλαγή σε νυχτερινή λειτουργία.

Κλοντ Σονέτο 4: Αυτό είναι μια καταστροφή. Δεν υπάρχει pixel art, και λείπει ακόμη και η κατάσταση επιλογής κουμπιού. Τα ρυθμιστικά είναι απλώς κουκκίδες—καλύτερα να χρησιμοποιήσετε τα προεπιλεγμένα στοιχεία.

Gemini 2.5 Pro: Αναφέρει επίσης ένα σφάλμα χωρίς πλέγμα pixel. Το περιεχόμενο στη δεξιά πλευρά μπορεί να λειτουργήσει κανονικά και η εναλλαγή θεμάτων λειτουργεί καλά, αλλά τα προεπιλεγμένα στοιχεία είναι λίγο άσχημα.

Δοκιμή 3: Εργαλείο εξαγωγής χρώματος διαβάθμισης εικόνας

Αυτό είναι ένα εργαλείο που έγραψα νωρίτερα. Δεν υπάρχει μεγάλη περιγραφή της λογικής, αλλά υπάρχει περισσότερη περιγραφή του στυλ. Η κύρια λειτουργία είναι η εξαγωγή πέντε συνόλων χρωμάτων διαβάθμισης από μια εικόνα.

Προτροπή: Δημιουργήστε μια ιστοσελίδα HTML με βάση το ακόλουθο περιεχόμενο αρχείου, υποστηρίξτε την εξαγωγή πέντε συνόλων χρωμάτων διαβάθμισης από εικόνες που έχουν μεταφορτωθεί και επιτρέψτε στους χρήστες να αντιγράψουν απευθείας τα πέντε σύνολα δεκαεξαδικών χρωμάτων διαβάθμισης. Πρέπει να υλοποιηθεί η λειτουργία εξαγωγής χρωμάτων.

1. Χρησιμοποιήστε οπτικό σχεδιασμό σε στυλ NetEase Cloud Music, λευκό φόντο με χρώμα παρόμοιο με το #FE1110 ως το κύριο χαρακτηριστικό
2. Δώστε έμφαση σε μεγάλες γραμματοσειρές ή αριθμούς για να επισημάνετε τα βασικά σημεία. Συμπεριλάβετε υπερμεγέθη οπτικά στοιχεία για να τονίσετε τις περιοχές εστίασης, δημιουργώντας αντίθεση με μικρότερα στοιχεία.
3. Συνδυάστε κείμενο σε κινέζικα και αγγλικά. Χρησιμοποιήστε έντονα, μεγάλα κινέζικα γράμματα και μικρότερο αγγλικό κείμενο ως τόνους.
4. Χρησιμοποιήστε απλά γραφικά με γραμμές για οπτικοποίηση δεδομένων ή ως διακοσμητικά στοιχεία.
5. Χρησιμοποιήστε την διαβάθμιση διαφάνειας των χρωμάτων επισήμανσης για να δημιουργήσετε ένα εφέ εμπνευσμένο από την τεχνολογία, αλλά βεβαιωθείτε ότι τα διαφορετικά χρώματα επισήμανσης δεν αναμειγνύονται μεταξύ τους.
6. Μιμηθείτε τα κινούμενα σχέδια της επίσημης ιστοσελίδας της Apple, με κινούμενα σχέδια που ενεργοποιούνται από την κύλιση του ποντικιού
7. Τα δεδομένα μπορούν να ανατρέξουν σε στοιχεία διαδικτυακού γραφήματος, με στυλ συμβατά με το θέμα
8. Χρησιμοποιήστε το Framer Motion (μέσω CDN)
9. Χρησιμοποιήστε HTML5, TailwindCSS 3.0+ (μέσω CDN) και την απαραίτητη JavaScript
10. Χρησιμοποιήστε επαγγελματικές βιβλιοθήκες εικονιδίων όπως το Font Awesome ή το Material Icons (μέσω CDN)
11. Αποφύγετε τη χρήση emoji ως κύρια εικονίδια
12. Το κουμπί κάψουλας στην κάτω αριστερή γωνία εμφανίζει το όνομα χρήστη Twitter του συγγραφέα

Σε αυτήν την περίπτωση, ο Claude τελικά έκανε εξαιρετική δουλειά. Οι λεπτομέρειες της σελίδας και η αισθητική του Deepseek-R1-0528 είναι εντυπωσιακές, αλλά η λειτουργικότητα δεν έχει υλοποιηθεί. Οι σελίδες του Opus 4 και του Sonnet 4 είναι απλούστερες αλλά τουλάχιστον λειτουργικές, ενώ το Gemini δεν είναι καθόλου λειτουργικό.

Deepseek-R1-0528: Αφού χρησιμοποίησα ξανά την προτροπή μου, η αισθητική της σελίδας του Deepseek είναι πραγματικά απαράμιλλη. Πρόσθεσε επίσης πολύ περιεχόμενο φιλικό προς τις μηχανές αναζήτησης στη σελίδα, όπως σενάρια εφαρμογών και χρόνους επεξεργασίας. Οι κάρτες προβολής με διαβαθμισμένο χρώμα είναι επίσης πολύ λεπτομερείς, αλλά η λογική επιλογής χρώματος δεν εφαρμόζεται.

Κλοντ Έργο 4: Αυτή τη φορά, ο Κλοντ τελικά δεν απογοήτευσε, ολοκληρώνοντας τη λειτουργικότητα της σελίδας, αλλά το περιεχόμενο της σελίδας είναι πολύ βασικό, με μόνο ένα σημείο για να ανεβάσετε εικόνες και τα αποτελέσματα, και η λογική επιλογής χρωμάτων είναι επίσης κακή. Ωστόσο, τουλάχιστον λειτουργεί.

Κλοντ Σονέτο 4: Το Sonnet 4 ολοκλήρωσε επίσης τη λειτουργικότητα, και νομίζω ότι τα αποτελέσματα του Sonnet είναι καλύτερα από αυτά του Opus, αν και δεν είναι τόσο πλούσια όσο του Deepseek.

Gemini 2.5 Pro: Αυτό είναι το χειρότερο. Όχι μόνο οι λεπτομέρειες και η αισθητική της σελίδας είναι ελλιπείς, αλλά δεν έχει υλοποιηθεί ούτε η λειτουργικότητα, και παρουσιάζει σφάλμα κατά την εκκίνηση.

Τεστ 4: Ιστότοπος καθημερινής προσφοράς λευκού θορύβου

Στη συνέχεια, υπάρχει μια γεννήτρια ιστοσελίδων με καθημερινές προσφορές λευκού θορύβου, η οποία είναι ιδανική για ένα πρόσθετο σελίδας νέας καρτέλας. Υποστηρίζει την αναπαραγωγή λευκού θορύβου από το Spotify και η ιστοσελίδα εμφανίζεται.

Ερώτηση: Παρακαλώ βοηθήστε με να δημιουργήσω έναν απλό και κομψό ιστότοπο ημερήσιων προσφορών με τις ακόλουθες απαιτήσεις:

Οπτικός Σχεδιασμός

• Εικόνα φόντου: Επιλέξτε τυχαία εικόνες τοπίου υψηλής ποιότητας από τους ακόλουθους συνδέσμους ως εικόνα φόντου
• Σύνδεσμοι εικόνας: XXXX
• Επεξεργασία εικόναςΠροσθέστε μια μαύρη μάσκα 25% και ένα ελαφρύ θάμπωμα Gauss για να διασφαλίσετε ότι το κείμενο παραμένει καθαρό και ευανάγνωστο
• Συνολικό ΣτυλΜινιμαλιστικό και μοντέρνο, με εικόνες τοπίου ως φόντο ιστοσελίδας για μεγαλύτερη εμβύθιση
• Χρησιμοποιήστε το anime.js (που παρουσιάστηκε μέσω CDN: JsDelivr jsdelivr.com) για το πλαίσιο animation, HTML5, TailwindCSS 3.0+ (που παρουσιάστηκε μέσω CDN) και την απαραίτητη JavaScript, και χρησιμοποιήστε επαγγελματικές βιβλιοθήκες εικονιδίων όπως το Font Awesome ή το Material Icons (που παρουσιάστηκαν μέσω CDN).

Μονάδα εμφάνισης ώρας

• Κορυφή: Εμφάνιση της μορφής μήνα και ημέρας (π.χ., «29 Μαΐου»), με μικρότερη γραμματοσειρά, στο κέντρο
• Δεύτερη σειράΕμφανίζει τη μορφή «Εβδομάδα X · Σεληνιακό ημερολόγιο Xος μήνας Xη ημέρα» σε μικρότερη γραμματοσειρά
• Κέντρο: Επισημαίνει την τρέχουσα ημερομηνία με μεγάλη λευκή γραμματοσειρά, στο κέντρο

Μονάδα εμφάνισης προσφορών

• Περιεχόμενο: Εμφανίζει τυχαία κλασικά αποφθέγματα από Κινέζους και ξένους φιλοσόφους και συγγραφείς
• ΣχέδιοΤα εισαγωγικά είναι κεντραρισμένα, το μέγεθος γραμματοσειράς είναι μέτριο και η απόσταση μεταξύ των γραμμών είναι άνετη
• Απόδοση: Εμφανίζεται η ένδειξη «Συγγραφέας, XXX» ή «Φιλόσοφος, XXX» κάτω δεξιά
• Βιβλιοθήκη ΠροσφορώνΠεριέχει αποσπάσματα για διάφορα θέματα όπως κίνητρα, γνώσεις ζωής και σοφία

Λειτουργία αναπαραγωγής μουσικής

• Τοποθεσία: Κάτω αριστερή γωνία της σελίδας, συμπτυγμένη από προεπιλογή
• ΠεριεχόμενοΕνσωμάτωση λίστας αναπαραγωγής λευκού θορύβου Spotify
• Κώδικας:

Τεχνική Υλοποίηση

• Ανταποκρινόμενος Σχεδιασμός: Προσαρμοσμένο για επιτραπέζιους και φορητές συσκευές
• Επιλογή γραμματοσειράςΧρησιμοποιήστε κομψές κινεζικές γραμματοσειρές, που παρουσιάστηκαν από την Google Fonts
• Χρωματικό σχέδιοΧρησιμοποιήστε κυρίως λευκό κείμενο για να διασφαλίσετε την αναγνωσιμότητα σε όλα τα φόντα
• Βελτιστοποίηση φόρτωσης: Αργή φόρτωση εικόνων για βελτίωση της απόδοσης της σελίδας

Διαδραστικές λειτουργίες

• Αυτόματη Ανανέωση: Αλλάζει αυτόματα την εικόνα φόντου και την προσφορά κάθε μέρα
• Χειροκίνητη ανανέωσηΠαρέχει ένα κουμπί ανανέωσης που επιτρέπει στους χρήστες να αλλάζουν χειροκίνητα το περιεχόμενο

Στυλ κειμενογραφίας

• Επιλογή ΠροσφοράςΠροτιμήστε σύντομα, θετικά και φιλοσοφικά αποσπάσματα
• Στυλ γλώσσαςΣυνοπτικό και δυνατό, αποφεύγοντας την υπερβολική διάρκεια
• Ταξινόμηση θεμάτων: Επιστήμες ζωής, εμπνευσμένη ανάπτυξη, σοφές σκέψεις, συναισθηματική έκφραση, κ.λπ.

Παρακαλούμε δημιουργήστε έναν ολοκληρωμένο ιστότοπο HTML/CSS/JavaScript σύμφωνα με τις παραπάνω απαιτήσεις, διασφαλίζοντας ότι η διεπαφή είναι αισθητικά ευχάριστη, λειτουργική και παρέχει μια καλή εμπειρία χρήστη.

Αυτή η δοκιμή έχει ως στόχο αποκλειστικά να αξιολογήσει την κατανόηση της αισθητικής κάθε μοντέλου. Αυτός ο τύπος ιστοσελίδας προσανατολισμένης στην προβολή είναι γενικά εφικτός.

Πρέπει να πούμε ότι το Claude Opus 4 εξακολουθεί να είναι αρκετά έγκυρο σε αυτόν τον τομέα, με εξαιρετική προσοχή στη λεπτομέρεια. Το Gemini 2.5 Pro είναι επίσης καλό, προσθέτοντας ακόμη και εφέ κίνησης στις μεταβάσεις εικόνας. Τα Deepseek και Sonnet 4 βρίσκονται στο ίδιο επίπεδο.

Deepseek-R1-0528: Έτρεξα πρώτα το Deepseek και το θεώρησα ήδη αρκετά καλό. Το πρώτο πρόβλημα με τη συνολική αισθητική ήταν το κουμπί μουσικής στην κάτω αριστερή γωνία, το οποίο ήταν λίγο πολύ επίπεδο. Η ενότητα με τα αποσπάσματα είχε επίσης προβλήματα—η μαύρη μάσκα δεν έπρεπε να είχε προστεθεί και η στοίχιση του κειμένου ήταν λίγο λανθασμένη. Ωστόσο, πρόσθεσε ένα εφέ κίνησης για την ανανέωση.

Κλοντ Έργο 4: Η αισθητική του Opus 4 είναι πραγματικά άψογη. Το μέγεθος και η απόσταση όλων των γραμματοσειρών είναι πολύ άνετα, και τα αποσπάσματα για τις διάσημες φράσεις έχουν αντιμετωπιστεί με διαφάνεια τόσο για το κείμενο των αποσπασμάτων όσο και για τα εισαγωγικά. Ακόμα και το πρόγραμμα αναπαραγωγής Spotify έχει ενσωματωθεί σε ένα περιβάλλον χρήστη με κινούμενη εικόνα ανάπτυξης/σύμπτυξης. Είναι τέλειο.

Κλοντ Σονέτο 4: Το αποτέλεσμα του Sonnet 4 είναι παρόμοιο με το πρόβλημα του Deepseek. Το κουμπί αναπαραγωγής μουσικής, το μέγεθος κειμένου, η ευθυγράμμιση και η απόσταση μπορούν να βελτιστοποιηθούν περαιτέρω.

Gemini 2.5 Pro: Το εφέ του Gemini είναι επίσης καλό, αλλά η αφαίρεση της σκιάς κειμένου θα το έκανε καλύτερο. Έχει επίσης προσαρμόσει το περιβάλλον χρήστη του προγράμματος αναπαραγωγής Spotify και οι λεπτομέρειες του κειμένου είναι καλές. Το εφέ μετάβασης είναι αισθητό, με ένα εφέ τάνυσης στην εικόνα.

Δοκιμή 5: Δημιουργία σελίδας εφαρμογής Ύπνου

Στη συνέχεια, ακολουθεί η δοκιμή της εφαρμογής για κινητά. Ζητήστε από τον καθένα να δημιουργήσει μια εφαρμογή παρακολούθησης ύπνου. Η προτροπή θα καθορίσει την τεχνική στοίβα και τις απαιτήσεις σχεδιασμού και θα απαιτήσει τη δημιουργία πολλαπλών διαδραστικών σελίδων.

Προτροπή: Απαιτήσεις ανάπτυξης εφαρμογής παρακολούθησης ύπνου

Επισκόπηση έργου

Παρακαλώ βοηθήστε με να δημιουργήσω μια ολοκληρωμένη εφαρμογή παρακολούθησης ύπνου με τέσσερις κύριες λειτουργικές σελίδες. Η διεπαφή θα πρέπει να είναι αισθητικά ευχάριστη και επαγγελματική.

Τεχνικές απαιτήσεις στοίβας

Τεχνολογίες frontend

– HTML5 – Δομή σελίδας

– TailwindCSS v3.0+ – Πλαίσιο στυλ (εισαχθεί μέσω CDN)

– JavaScript – Απαραίτητη λογική αλληλεπίδρασης

– Anime.js έκδοση 4.0.2 – Βιβλιοθήκη εφέ κίνησης

• ΔΠΠ: https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm

Εικονίδια και γραφήματα

• Βιβλιοθήκη εικονιδίων: Font Awesome ή Material Icons (CDN)
• Στοιχεία γραφήματος: Τα στοιχεία και τα στυλ του διαδικτυακού γραφήματος πρέπει να είναι συμβατά με το θέμα
• Οπτικοποίηση δεδομένων: Υποστηρίζει την απεικόνιση δεδομένων ύπνου σε γράφημα

Απαιτήσεις σχεδιασμού

Σχεδιασμός με δυνατότητα απόκρισης

• Πλήρως προσαρμόσιμη διάταξη
• Σχεδιασμός με προτεραιότητα στα κινητά
• Καλή εμφάνιση τόσο σε επιτραπέζιους υπολογιστές όσο και σε κινητές συσκευές

Επιδράσεις αλληλεπίδρασης

• Αλληλεπίδραση με κουμπιά: Ελαφρώς μεγεθυμένο εφέ κατά την τοποθέτηση του δείκτη του ποντικιού ....

Αλληλεπίδραση φόρμας: Εμφάνιση περιγράμματος διαβάθμισης όταν το πεδίο εισαγωγής είναι εστιασμένο

Αλληλεπίδραση κάρτας: Σκουρύνετε τη σκιά όταν τοποθετείτε τον δείκτη του ποντικιού

Εφέ κίνησης: Χρησιμοποιήστε το Anime.js για να επιτύχετε ομαλές κινήσεις σελίδας

Απαιτήσεις λειτουργικής σελίδας

Δημιουργήστε όλες τις σελίδες που απαιτούνται για μια εφαρμογή παρακολούθησης ύπνου, συμπεριλαμβανομένων ενδεικτικά:

• Αρχική σελίδα/πίνακας ελέγχου
• Σελίδα καταγραφής ύπνου
• Σελίδα ανάλυσης δεδομένων
• Σελίδα ρυθμίσεων
• Άλλες σχετικές λειτουργικές σελίδες

Απαιτήσεις εξόδου κώδικα

• Κάθε σελίδα είναι ένα ανεξάρτητο αρχείο HTML
• Σαφής δομή κώδικα με πλήρη σχόλια
• Βεβαιωθείτε ότι όλοι οι σύνδεσμοι CDN είναι προσβάσιμοι
• Παροχή πλήρους, εκτελέσιμου κώδικα

Όσον αφορά τη λογική και τη διεπαφή για κινητά, το Cluade Opus 4 απέδειξε για άλλη μια φορά τη δύναμή του, ολοκληρώνοντας πολλαπλές σελίδες με καλή λογική. Τα άλλα μοντέλα δημιούργησαν μόνο μία σελίδα, αλλά το Deepseek R1 0528 ξαφνικά πέτυχε τον στόχο του όσον αφορά την αισθητική, με ένα όμορφο στυλ. Αν και δημιούργησε μόνο μία σελίδα, ήταν πολύ ολοκληρωμένο.

Deepseek-R1-0528: Δημιουργήθηκε μόνο μία σελίδα, αλλά η συνολική αισθητική είναι καλή. Οι λεπτομέρειες των καρτών και ο χειρισμός των εικονιδίων είναι καλοφτιαγμένοι και ολόκληρη η σελίδα είναι πλήρης και μεγάλη. Επιπλέον, εφαρμόστηκε responsive design για την πλοήγηση, με αποτέλεσμα εντελώς διαφορετικές διατάξεις σε κινητές και επιτραπέζιες συσκευές.

Κλοντ Έργο 4: Πράγματι ισχυρό, μόνο το Opus4 δημιούργησε όλες τις σελίδες πλήρως, αλλά ο αισθητικός σχεδιασμός αυτή τη φορά δεν είναι εξαιρετικός, χρησιμοποιώντας τη λογική της ιστοσελίδας, με εικονίδια πλοήγησης που είναι πολύ μικρά.

Κλοντ Σονέτο 4: Δημιουργήθηκε μόνο μία σελίδα και αναφέρθηκαν σφάλματα, με κακό αισθητικό σχεδιασμό, απλώς ολοκληρώνοντας την εργασία.

Gemini 2.5 Pro: Η Google κάνει πάντα τα πράγματα διαφορετικά. Δημιουργεί κάθε σελίδα ξεχωριστά, παρέχοντας τέσσερα αρχεία που δεν μπορούν να αλληλεπιδράσουν μεταξύ τους. Επιπλέον, όλες οι σελίδες ανέφεραν σφάλματα, με κάθε σελίδα να περιέχει μόνο πλοήγηση και καθόλου περιεχόμενο, κάτι που είναι αρκετά απογοητευτικό.

Τεστ 6: Σύνθετη Λειτουργικότητα—Tetris

Τέλος, ολοκλήρωσα με ένα μικρό τεστ παιχνιδιού. Σχεδίασα ένα σχετικά πολύπλοκο παιχνίδι Tetris με ειδικά μπλοκ, εναλλαγή θεμάτων, πρόβλεψη προσγείωσης μπλοκ, αποθήκευση μπλοκ και πολλά άλλα - μια πραγματικά απόλυτη πρόκληση.

Ερώτηση: Παρακαλώ βοηθήστε με να δημιουργήσω ένα πλήρως λειτουργικό, οπτικά ελκυστικό διαδικτυακό παιχνίδι Tetris με τις ακόλουθες απαιτήσεις:

Βασικά χαρακτηριστικά παιχνιδιού

1. Πλήρης μηχανισμός Tetris: 7 τυπικά μπλοκ (I, O, T, S, Z, J, L)
2. Ομαλά χειριστήρια: κίνηση αριστερά και δεξιά, περιστροφή, γρήγορη πτώση, άμεση πτώση
3. Έξυπνο σύστημα εξάλειψης: υποστηρίζει την εξάλειψη 1-4 γραμμών κάθε φορά με ειδικά εφέ κίνησης
4. Σύστημα προοδευτικής δυσκολίας: αυξάνει αυτόματα την ταχύτητα και το επίπεδο πτώσης με βάση τον αριθμό των γραμμών που εξαλείφονται

Προηγμένες λειτουργίες

1. Σύστημα προεπισκόπησης: εμφανίζει τα επόμενα και τα επόμενα μπλοκ
2. Λειτουργία κρατήματος: Κρατήστε πατημένο το πλήκτρο Hold για να αποθηκεύσετε προσωρινά το τρέχον μπλοκ. Μπορεί να χρησιμοποιηθεί μόνο μία φορά ανά γύρο.
3. Μπλοκ ΦαντασμάτωνΕμφανίζει τη θέση προσγείωσης των μπλοκ σε ημιδιαφανή μορφή
4. Σύστημα συνδυασμού: Η συνεχής εκκαθάριση δίνει επιπλέον πόντους και οπτικά εφέ
5. Ειδικές Δεξιότητες:
   1. Μπλοκ Βομβών (καθαρίζει τη γύρω περιοχή)
   2. Laser Clear (καθαρίζει ολόκληρη τη σειρά)
   3. Παύση χρόνου (τα μπλοκ σταματούν να πέφτουν για 3 δευτερόλεπτα)

Απαιτήσεις Οπτικού Σχεδιασμού

1. Σύγχρονη διεπαφή χρήστη:
   1. Διαβάθμιση φόντου ή εφέ σωματιδίων
   2. Πίνακας παιχνιδιού με εφέ γυαλιού
   3. Ομαλές μεταβάσεις κινούμενης εικόνας
   4. Σχεδιασμός με δυνατότητα απόκρισης για διαφορετικές οθόνες
2. Πλούσια οπτικά εφέ:
   1. Ομαλή κίνηση των μπλοκ που πέφτουν και περιστρέφονται
   2. Εφέ έκρηξης ή λάμψης όταν εξαλείφονται
   3. Εφέ κουνήματος οθόνης όταν επιτυγχάνεται συνδυασμός
   4. Κινούμενη εικόνα εορτασμού όταν αναβαθμίζεται το επίπεδο
3. Σύστημα θεμάτων: Τουλάχιστον 3 διαφορετικά οπτικά θέματα για εναλλαγή

Σύστημα ηχητικών εφέ

1. Πλήρης ηχητική ανατροφοδότηση: κίνηση, περιστροφή, προσγείωση, αποβολή, τέλος παιχνιδιού, κ.λπ.
2. Μουσική υπόκρουση: επανάληψη μουσικής υποβάθρου παιχνιδιού
3. Έλεγχος έντασης ήχου: ανεξάρτητα ρυθμιζόμενα ηχητικά εφέ και ένταση μουσικής υποβάθρου

Λειτουργίες παιχνιδιού

1. Κλασική λειτουργία: παραδοσιακό παιχνίδι Tetris
2. Λειτουργία περιορισμένου χρόνου: επίτευξη της υψηλότερης βαθμολογίας εντός καθορισμένου χρονικού ορίου
3. Λειτουργία πρόκλησης: προκαθορισμένα εμπόδια για αύξηση της δυσκολίας
4. Λειτουργία Ζεν: καμία πίεση χρόνου, απόλυτη απόλαυση του παιχνιδιού

Χαρακτηριστικά στατιστικών δεδομένων

1. Στατιστικά σε πραγματικό χρόνο: τρέχουσα βαθμολογία, επίπεδο, αριθμός γραμμών που έχουν καθαριστεί, χρόνος παιχνιδιού
2. Ιστορία: υψηλότερη βαθμολογία, καλύτερο επίπεδο, συνολικός χρόνος παιχνιδιού
3. Σύστημα επιτευγμάτων: ξεκλειδώστε διάφορα επιτεύγματα παιχνιδιού
4. Τοπική αποθήκευση: αποθήκευση αρχείων και ρυθμίσεων παιχνιδιού

Τεχνικές απαιτήσεις

1. Χρησιμοποιεί καθαρή HTML5/CSS3/JavaScript, δεν απαιτούνται εξωτερικά πλαίσια
2. Σαφής δομή κώδικα: αντικειμενοστρεφής προγραμματισμός, αρθρωτός σχεδιασμός
3. Βελτιστοποίηση απόδοσης: ομαλή κίνηση 60FPS, χωρίς καθυστέρηση
4. Αρμονία: υποστηρίζει τα κύρια σύγχρονα προγράμματα περιήγησης
5. Σχεδιασμός με δυνατότητα απόκρισηςΣυμβατό με υπολογιστές και κινητές συσκευές

Εμπειρία χρήστη

1. Διαισθητικές οδηγίεςΕνσωματωμένο σεμινάριο και οδηγίες κουμπιών
2. Λειτουργία παύσης/συνέχισης: Παύση του παιχνιδιού ανά πάσα στιγμή
3. Μενού ρυθμίσεων: Προσαρμόστε τη δυσκολία του παιχνιδιού, τα ηχητικά εφέ, τα οπτικά εφέ κ.λπ.
4. Αποθήκευση κατάστασης παιχνιδιούΥποστηρίζει την αποθήκευση και τη συνέχιση του παιχνιδιού

Απαιτήσεις ποιότητας κώδικα

1. Λεπτομερή σχόλιαΚάθε συνάρτηση και σημαντικό τμήμα κώδικα πρέπει να έχει μια περιγραφή
2. Διαχείριση σφαλμάτων: Πλήρης μηχανισμός καταγραφής και χειρισμού εξαιρέσεων
3. Κομψός κώδικαςΑκολουθήστε τις βέλτιστες πρακτικές, εύκολο στην κατανόηση και τη συντήρηση
4. Εκτατο: Εύκολη προσθήκη νέων λειτουργιών στο μέλλον

Παρακαλούμε να παρέχετε πλήρη αρχεία HTML που περιέχουν όλο τον κώδικα CSS και JavaScript, ώστε να διασφαλιστεί ότι μπορούν να εκτελεστούν απευθείας σε ένα πρόγραμμα περιήγησης. Ο κώδικας θα πρέπει να καταδεικνύει επαγγελματικές δεξιότητες προγραμματισμού και βαθιά κατανόηση της ανάπτυξης παιχνιδιών.

Στο μίνι παιχνίδι, ο Claude έχει κάτι να κάνει. Τόσο ο Opus όσο και ο Sonnet δημιούργησαν τα αντίστοιχα μπλοκ Tetris όπως απαιτείται, ειδικά τη λογική για τα ειδικά μπλοκ. Το Deepseek χειρίστηκε το θέμα που ο Claude παρέβλεψε, αλλά έχασε τα ειδικά μπλοκ, με αποτέλεσμα το Gemini 2.5 Pro να δημιουργεί μπλοκ που δεν μπορούν να παιχτούν.

Deepseek-R1-0528: Η εργασία ολοκληρώθηκε πολύ καλά και σύμφωνα με τις προδιαγραφές, αλλά ο ειδικός σχεδιασμός μπλοκ παραλείφθηκε και δεν εφαρμόστηκε καθόλου. Αυτό μπορεί να οφείλεται σε προβλήματα με την παρακολούθηση των λέξεων-κλειδιών. Ολόκληρη η ιστοσελίδα μοιάζει με μια διεπαφή παιχνιδιού, με όλα τα κουμπιά να εμφανίζονται σαν τυπικά στοιχεία.

Κλοντ Έργο 4: Ολοκλήρωσα τη λογική για τα ειδικά μπλοκ και άλλες λογικές χωρίς προβλήματα, αλλά αγνόησα την προτροπή για αλλαγή θέματος, την οποία δεν εφάρμοσα. Σε σύγκριση με τα προβλήματα του DeepSeek, αυτό είναι ένα μικρότερο πρόβλημα, αλλά η διεπαφή είναι ενσωματωμένη χωρίς λογική απόκρισης, επομένως οι αναλογίες είναι ελαφρώς αλλοιωμένες, καθιστώντας ορισμένα κουμπιά μη κλικάσιμα.

Κλοντ Σονέτο 4: Παρόμοιο με το Opus, αλλά νομίζω ότι το Sonnet 4 είναι καλύτερο από το Opus. Η προσαρμογή σελίδας είναι επίσης καλή. Αυτό μου δίνει την αίσθηση ότι το Sonnet κέρδισε, καθώς ολοκλήρωσε όλες τις απαιτούμενες λειτουργίες.

Gemini 2.5 Pro: Ο Gemini δυσκολεύεται συνεχώς με πολύπλοκη λογική. Αυτή τη φορά, ήταν εντελώς άχρηστος επειδή η τοποθέτηση των τούβλων είχε ένα σφάλμα, καθιστώντας αδύνατη την πρόβλεψη του πού θα κατέληγαν. Είναι το χειρότερο.

Μέχρι τώρα, νομίζω ότι έχεις εκπλαγεί όσο κι εγώ από την απόδοση του DeepSeek-R1.

Είναι δύσκολο να πιστέψει κανείς ότι πρόκειται απλώς για μια μικρή αναβάθμιση μοντέλου. Ας συγκρίνουμε τις τιμές αυτών των μοντέλων με το DeepSeek R1 0528.

Το Opus 4 είναι 30 φορές πιο ακριβό, και αυτό με βάση την τιμολόγηση του Openrouter—η επίσημη τιμή θα ήταν ακόμη πιο εκπληκτική.

μοντέλο	Μήκος περιβάλλοντος	Τιμή εισόδου ($/M tokens)	Τιμή εξόδου (μάρκες $/M)	τιμή εικόνας (μάρκες $/K)
DeepSeek R1 0528	160 χιλιάδες	0.50	2.18	–
Προεπισκόπηση Gemini 2.5 pro	1000 χιλιάδες	1.25	10	5.16
Κλοντ Σονέ 4	200 χιλιάδες	3.00	15	4.80
Κλοντ Έπους 4	200 χιλιάδες	15.00	75	24.00

Ως κάποιος που ασχολείται καθημερινά με νέα σχετικά με την Τεχνητή Νοημοσύνη, έχω γίνει μάρτυρας αμέτρητων «ανακαλύψεων» που τελικά αποδεικνύονται «απογοητευτικές». Αλλά αυτή τη φορά είναι διαφορετικά. Το DeepSeek-R1 μου έδωσε πραγματική ελπίδα.

30πλάσια διαφορά τιμής, αλλά σχεδόν ισοδύναμη απόδοση.

Δεν χρειάζεται πλέον να πληρώνουμε υπερβολικές τιμές για να χρησιμοποιήσουμε τα καλύτερα μοντέλα προγραμματισμού τεχνητής νοημοσύνης, ούτε χρειάζεται να κάνουμε επώδυνους συμβιβασμούς μεταξύ κόστους και ποιότητας. Ακόμα πιο εμπνευστικό είναι ότι αυτό είναι το δικό μας μοντέλο.

Αυτή η πρόταση γράφτηκε από την Τεχνητή Νοημοσύνη και τη βρίσκω εξαιρετική: Η αληθινή επανάσταση συχνά ξεκινά όταν οι απλοί άνθρωποι μπορούν να φτάσουν στα αστέρια.