بناء أتمتة سير عمل متقدمة للذكاء الاصطناعي باستخدام Next.js وDataSpeck

ما الذي نبنيه

في هذا الدرس، سنقوم ببناء نظام أتمتة سير عمل متقدم مدفوع بالذكاء الاصطناعي. سنستخدم DataSpeck—نظام متطور تم تقديمه في CHI ٢٠٢٦ والذي يستفيد من بنية الذكاء الاصطناعي بمشاركة الإنسان في الحلقة لتوليد كود تحويل البيانات ديناميكيًا. هذا يحل المشكلة الشهيرة للغموض الدلالي في مجموعات البيانات الكبيرة.

سيكون مشروعنا النهائي تطبيق ويب Next.js يسمح للمستخدمين بتحديد مهام تحويل البيانات الخام. سيقوم الجزء الخلفي من Next.js بتمرير هذه المهام بأمان إلى DataSpeck لتوليد وتنفيذ سكربتات التحويل اللازمة بلغة Python، بينما يوفر واجهة مستخدم أمامية للمراجعة البشرية والتنقيح.

ملاحظة: نظرًا لأن DataSpeck قد تم تقديمه مؤخرًا كنموذج بحثي، فإن عناوين URL لنقاط نهاية API في هذا الدرس توضيحية. يرجى تعديل عناوين URL وفقًا لنشر محلي محدد أو بوابة وصول مؤسسية.

الإعداد والتثبيت

أولاً، قم بتهيئة بيئة Next.js حديثة وقم بتثبيت عميل HTTP الضروري لاتصالاتنا من جانب الخادم.

npx create-next-app@latest dataspeck-automation
cd dataspeck-automation
npm install axios

قم بتكوين متغيرات البيئة الخاصة بك بأمان. لا تعرض مفتاح API الخاص بـ DataSpeck لمتصفح العميل. أنشئ ملف .env.local في الدليل الجذري:

# .env.local
DATASPECK_API_KEY=sk-ds-your_secure_api_key_here

الخطوة ١: واجهة المستخدم من جانب العميل (مكونات خادم React)

نظرًا لأننا نستخدم Next.js App Router، فإن المكونات تكون افتراضيًا مكونات خادم. للتعامل مع حالة المستخدم ونقرات الأزرار، يجب علينا تحديد واجهتنا كمكون عميل باستخدام توجيه "use client".

'use client';

import { useState } from 'react';
import axios from 'axios';

export default function DataConversionInterface() {
  const [inputData, setInputData] = useState('');
  const [conversionResult, setConversionResult] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleConvert = async () => {
    setIsLoading(true);
    try {
      // Calls our secure Next.js Route Handler, not the external API directly
      const response = await axios.post('/api/convert', { data: inputData });
      setConversionResult(response.data);
    } catch (error) {
      console.error('Error converting data:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">DataSpeck Conversion Hub</h1>
      <textarea
        className="w-full p-4 border rounded"
        rows="6"
        value={inputData}
        onChange={(e) => setInputData(e.target.value)}
        placeholder="Paste your raw CSV or JSON array here..."
      />
      <button 
        className="mt-4 px-6 py-2 bg-blue-600 text-white rounded"
        onClick={handleConvert} 
        disabled={isLoading}
      >
        {isLoading ? 'Processing via AI...' : 'Generate Transformation'}
      </button>
      
      {conversionResult && (
        <div className="mt-6 p-4 bg-gray-50 rounded">
           <h3 className="font-semibold">AI Output:</h3>
           <pre className="text-sm mt-2">{JSON.stringify(conversionResult, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}
  

الخطوة ٢: إنشاء معالج المسار الآمن

بعد ذلك، نبني معالج مسار API. في Next.js ١٤+، يوجد هذا في app/api/convert/route.js. تتواصل هذه الوظيفة من جانب الخادم بأمان مع DataSpeck، مما يحافظ على مفاتيح API الخاصة بك مخفية عن المتصفح.

import { NextResponse } from 'next/server';
import axios from 'axios';

export async function POST(request) {
  try {
    const { data } = await request.json();
    const apiKey = process.env.DATASPECK_API_KEY;
    const apiUrl = 'https://api.dataspeck.com/v1/transform'; // Adjust to your instance

    if (!data) {
      return NextResponse.json({ error: 'Data payload is required' }, { status: 400 });
    }

    const response = await axios.post(apiUrl, { payload: data }, {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json'
      }
    });
    
    return NextResponse.json(response.data);
  } catch (error) {
    console.error('DataSpeck API Error:', error.response?.data || error.message);
    return NextResponse.json({ error: 'Failed to process data conversion' }, { status: 500 });
  }
}
  

الخطوة ٣: دمج التغذية الراجعة بمشاركة الإنسان في الحلقة

يتألق DataSpeck عند التعامل مع الغموض الدلالي (مثل تحديد ما إذا كانت “St.” تعني “شارع” أو “قديس”). نحتاج إلى مكون لالتقاط المراجعة البشرية قبل الموافقة على تنفيذ الكود النهائي.

'use client';

import { useState } from 'react';
import axios from 'axios';

export default function HumanReviewLayer({ reviewData }) {
  const [feedback, setFeedback] = useState('');
  const [status, setStatus] = useState('pending');

  const handleSubmitFeedback = async () => {
    setStatus('submitting');
    try {
      await axios.post('/api/feedback', { 
        jobId: reviewData.jobId, 
        userCorrection: feedback 
      });
      setStatus('resolved');
      alert('Feedback integrated. Re-running transformation script!');
    } catch (error) {
      console.error('Feedback sync failed:', error);
      setStatus('error');
    }
  };

  if (!reviewData) return null;

  return (
    <div className="border-t-2 mt-8 pt-6">
      <h2 className="text-xl font-bold text-red-600">Human Review Required</h2>
      <p className="mb-4 text-gray-600">The AI detected an ambiguity in the mapping logic.</p>
      
      <textarea
        className="w-full p-3 border rounded border-red-300"
        value={feedback}
        onChange={(e) => setFeedback(e.target.value)}
        placeholder="Provide semantic context (e.g., 'Convert all dates to ISO 8601')"
      />
      <button 
        className="mt-3 px-4 py-2 bg-green-600 text-white rounded"
        onClick={handleSubmitFeedback}
      >
        {status === 'submitting' ? 'Syncing...' : 'Submit Human Override'}
      </button>
    </div>
  );
}
  

اختبار تنفيذك

للتحقق من سير العمل، قم بتشغيل خادم تطوير Next.js ومرر مجموعة بيانات غامضة عمدًا لتفعيل المراجعة بمشاركة الإنسان في الحلقة.

# Start Next.js App Router
npm run dev

# Example payload to trigger ambiguity
[
  { "customer": "J. Doe", "address": "123 Main St." },
  { "customer": "A. Smith", "address": "456 St. John Ave" }
]

ما الذي يجب بناؤه بعد ذلك

• Webhooks: قم بتنفيذ Webhooks من جانب الخادم للاستماع إلى أحداث الإكمال غير المتزامنة عندما ينتهي DataSpeck من توليد سكربتات Python الكبيرة.
• التحكم في الإصدارات: قم بتسجيل سكربتات التحويل المولدة في حاوية AWS S3 لإنشاء مسار تدقيق لمنطق الذكاء الاصطناعي بمرور الوقت.

🤖 دعم تفاعلي للمطورين

يتضمن تنفيذ بنى Human-in-the-Loop مع Next.js App Router إدارة حالات غير متزامنة معقدة وتوجيه API آمن. لا يتعين عليك حل المشاكل بمفردك.

هل تواجه صعوبة في توصيل معالجات المسار أو تواجه مشكلات في التنسيق مع DataSpeck؟

تفاعل مع مساعد بوابة الذكاء الاصطناعي التقني مباشرة في واجهة الدردشة أدناه. مساعدنا التفاعلي مدرك تمامًا لسياق هذا الدرس ويمكنه مساعدتك في تصحيح مكونات React الخاصة بك، أو تحسين مسارات API الخاصة بـ Next.js، أو تحسين حلقة التغذية الراجعة للذكاء الاصطناعي.