شرح عملي متوسط
أنشئ وحدة لمقارنة GPT وClaude باستخدام Next.js
أنشئ وحدة مراجعة محلية لعرض استجابة OpenAI GPT واستجابة Anthropic Claude جنبًا إلى جنب. تتجنب هذه النسخة المُتحقق منها، عن قصد، الادعاء بوجود تكامل غير مُثبت مع SDK الخاص بأحد المزوّدين. وتركّز بدلًا من ذلك على سير عمل قابل لإعادة التنفيذ للمراجعة، يعتمد على التعليمات، ومخرجات النماذج، والاختبارات، وسجلات الأحداث، وبيانات تشخيص المتصفح.
ما الذي ينشئه هذا الشرح فعليًا؟
وصفت المسودة الأصلية خادمًا يرسل تعليمًا واحدًا مباشرةً إلى OpenAI وClaude، ويستدعي الخدمتين بالتوازي، ويتحقق من الطلبات باستخدام Zod، ويسجل زمن استجابة المزوّد، ويوحّد تنسيقي استجابة مختلفين من SDK. ولا تتحقق الأدلة المتاحة من تفاصيل التنفيذ هذه. لكنها تتحقق من سير عمل أضيق نطاقًا ومفيدًا: يمكن استخدام GPT وClaude كواجهتي خلفية للذكاء الاصطناعي، ويمكن لـClaude المساعدة في إنشاء الاختبارات وسجلات الأحداث، كما يمكن لنتائج الاختبارات وسجلات الأحداث وبيانات المتصفح توفير سياق لتصحيح الأخطاء.
وبناءً على ذلك، ينشئ هذا الشرح واجهة مراجعة في متصفح مبنية باستخدام Next.js، وتقبل تعليمًا واحدًا ومخرجين ملصقين. تحمل إحدى اللوحتين اسم OpenAI GPT، بينما تحمل الأخرى اسم Anthropic Claude. تحفظ الوحدة التعليم، وتعرض الإجابتين، وتتيح للمراجع تسجيل ملاحظاته. وهي لا ترسل أسرارًا إلى أي مزوّد، ولا تدّعي قياس زمن استجابة المزوّد، ولا تستنتج أن أحد النماذج أفضل دائمًا من الآخر.
هذا التمييز مهم لضمان الدقة التقنية. فواجهة المقارنة ليست معيارًا مرجعيًا تلقائيًا. ويتطلب التقييم القابل للدفاع عنه مجموعة تعليمات ممثلة، وتعليمات ثابتة، ومعرّفات مستقرة للنماذج، وإعدادات قابلة للتكرار، وتجارب متعددة، ومعيارًا لتقييم بشري. ويوضح ملخص أبحاث S.C.O.R.E. الوارد في السياق المقدم هذا الاتجاه الأوسع للتقييم؛ إذ يذكر التحقق باستخدام BLEU وROUGE وBERTScore مع GPT-4o وClaude 4 Sonnet وDeepSeek. ولا يتحقق هذا الملخص من كود التطبيق أدناه، ولا ينبغي اعتباره دليلًا على تفوق أي نموذج في كل مهمة.
المتطلبات الأساسية وحدود الأدلة
- مشروع Next.js يعمل باستخدام App Router وTypeScript. لا تثبت المصادر المقدمة إصدارًا محددًا مطلوبًا من Next.js، لذا استخدم الإصدار المعتمد حاليًا لمشروعك.
- متصفح وبيئة تطوير مناسبة للمشروع الحالي.
- وصول إلى سير عمل GPT أو Claude يمكنك من خلاله الحصول على مخرجات للمراجعة. يوثق السياق المتحقق منه GPT وClaude كواجهتين محتملتين للذكاء الاصطناعي ضمن إعداد OpenClaw، لكنه لا يقدم وصفة متحققة لاستخدام SDK الخاص بأحد المزوّدين في هذا الشرح.
- تعليم للاختبار ومعيار مراجعة يغطي الدقة، والاكتمال، والوضوح، والادعاءات غير المدعومة.
لا تضع مفتاح API داخل هذه الوحدة من جهة العميل. يذكر السياق مفاتيح API باعتبارها جزءًا من إعداد واجهة خلفية للذكاء الاصطناعي، لكنه لا يتحقق من وجود تطبيق آمن لإدارة المفاتيح في هذا المشروع. وإذا أضافت مؤسستك لاحقًا تكاملًا مباشرًا مع خادم، فتحقق من الوثائق الرسمية الحالية للمزوّد المختار، واحتفظ ببيانات الاعتماد على الخادم، وأخضع التصميم لمراجعة أمنية وحوكمية.
الخطوة ١: إنشاء صفحة المقارنة
استبدل مكوّن الصفحة في مشروع App Router الحالي بمكوّن العميل الكامل التالي. يستخدم هذا المكوّن عمدًا حالة React العادية والعرض داخل المتصفح. ويقبل تعليمًا ومخرجًا من GPT ومخرجًا من Claude. وبما أن نص النموذج يُعرض كنص بدلًا من حقنه كـHTML، تظل المخرجات الملصقة محتوى غير موثوق، ولا يجري تفسيرها على أنها ترميز.
"use client";import { useState } from "react";type Review = {
correctness: string;
completeness: string;
notes: string;
};const emptyReview: Review = {
correctness: "",
completeness: "",
notes: "",
};export default function HomePage() {
const [prompt, setPrompt] = useState("");
const [gptOutput, setGptOutput] = useState("");
const [claudeOutput, setClaudeOutput] = useState("");
const [review, setReview] = useState<Review>(emptyReview);function updateReview(field: keyof Review, value: string) {
setReview((current) => ({ ...current, [field]: value }));
}function clearWorkspace() {
setPrompt("");
setGptOutput("");
setClaudeOutput("");
setReview(emptyReview);
}return (
<main style={{ maxWidth: 1200, margin: "0 auto", padding: 32, fontFamily: "Arial, sans-serif" }}>
<header>
<p style={{ fontWeight: 700, color: "#4f46e5" }}>GPT + CLAUDE REVIEW CONSOLE</p>
<h1>Compare two model outputs side by side</h1>
<p>Paste one prompt and the corresponding GPT and Claude outputs. Review them against the same criteria without treating the result as a universal benchmark.</p>
</header><label htmlFor="prompt"><strong>Prompt used for both outputs</strong></label>
...تابع القراءة
سجل دخولك مجاناً لقراءة المقال كاملاً والوصول إلى أدوات الذكاء الاصطناعي.
تسجيل الدخول / إنشاء حساب