بناء أتمتة سير عمل متقدمة للذكاء الاصطناعي باستخدام 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...
تابع القراءة
سجل دخولك مجاناً لقراءة المقال كاملاً والوصول إلى أدوات الذكاء الاصطناعي.
تسجيل الدخول / إنشاء حساب