بناء تطبيقات ذكاء اصطناعي فائقة السرعة باستخدام Groq SDK وLlama 4 وTypeScript

pnpm add groq-sdk

GROQ_API_KEY=gsk_مفتاحك_هنا

import Groq from 'groq-sdk';
 
export const groq = new Groq({
  apiKey: process.env.GROQ_API_KEY,
});

// scripts/test-groq.ts
import { groq } from '../lib/groq';
 
const completion = await groq.chat.completions.create({
  model: 'llama-4-scout-17b-16e-instruct',
  messages: [
    {
      role: 'user',
      content: 'اشرح ما الذي يميّز Groq عن مزودي الاستدلال الآخرين في جملتين.',
    },
  ],
  max_tokens: 256,
});
 
console.log(completion.choices[0].message.content);
console.log('الاستخدام:', completion.usage);

npx tsx scripts/test-groq.ts

import { groq } from '@/lib/groq';
import { NextRequest } from 'next/server';
 
export const runtime = 'nodejs';
 
export async function POST(req: NextRequest) {
  const { messages, model = 'llama-4-scout-17b-16e-instruct' } = await req.json();
 
  const stream = await groq.chat.completions.create({
    model,
    messages,
    stream: true,
    max_tokens: 1024,
    temperature: 0.7,
  });
 
  const encoder = new TextEncoder();
 
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const delta = chunk.choices[0]?.delta?.content ?? '';
        if (delta) {
          controller.enqueue(encoder.encode(delta));
        }
      }
      controller.close();
    },
  });
 
  return new Response(readable, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
      'Transfer-Encoding': 'chunked',
      'X-Content-Type-Options': 'nosniff',
    },
  });
}

'use client';
 
import { useState, useRef } from 'react';
 
interface Message {
  role: 'user' | 'assistant';
  content: string;
}
 
const MODELS = [
  { value: 'llama-4-scout-17b-16e-instruct', label: 'Llama 4 Scout (الأسرع)' },
  { value: 'llama-4-maverick-17b-128e-instruct', label: 'Llama 4 Maverick' },
  { value: 'llama-3.3-70b-versatile', label: 'Llama 3.3 70B' },
  { value: 'mixtral-8x7b-32768', label: 'Mixtral 8x7B' },
];
 
export function GroqChat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [model, setModel] = useState(MODELS[0].value);
  const [loading, setLoading] = useState(false);
  const [tokensPerSec, setTokensPerSec] = useState<number | null>(null);
  const abortRef = useRef<AbortController | null>(null);
 
  async function sendMessage() {
    if (!input.trim() || loading) return;
 
    const userMessage: Message = { role: 'user', content: input };
    const newMessages = [...messages, userMessage];
    setMessages(newMessages);
    setInput('');
    setLoading(true);
    setTokensPerSec(null);
 
    const assistantMessage: Message = { role: 'assistant', content: '' };
    setMessages([...newMessages, assistantMessage]);
 
    abortRef.current = new AbortController();
    const startTime = performance.now();
    let tokenCount = 0;
 
    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ messages: newMessages, model }),
        signal: abortRef.current.signal,
      });
 
      const reader = res.body!.getReader();
      const decoder = new TextDecoder();
      let accumulated = '';
 
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value, { stream: true });
        accumulated += chunk;
        tokenCount += chunk.split(' ').length;
        setMessages(prev => [
          ...prev.slice(0, -1),
          { role: 'assistant', content: accumulated },
        ]);
      }
 
      const elapsed = (performance.now() - startTime) / 1000;
      setTokensPerSec(Math.round(tokenCount / elapsed));
    } catch (err: unknown) {
      if (err instanceof Error && err.name !== 'AbortError') {
        console.error('خطأ في تدفق Groq:', err);
      }
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <div className="max-w-2xl mx-auto p-4 flex flex-col gap-4" dir="rtl">
      <div className="flex items-center gap-2">
        <select
          value={model}
          onChange={e => setModel(e.target.value)}
          className="border rounded px-2 py-1 text-sm"
        >
          {MODELS.map(m => (
            <option key={m.value} value={m.value}>{m.label}</option>
          ))}
        </select>
        {tokensPerSec !== null && (
          <span className="text-sm text-green-600 font-mono">
            {tokensPerSec} رمز/ث
          </span>
        )}
      </div>
 
      <div className="flex flex-col gap-2 min-h-64 border rounded p-3 bg-gray-50">
        {messages.map((msg, i) => (
          <div
            key={i}
            className={`rounded p-2 text-sm whitespace-pre-wrap ${
              msg.role === 'user' ? 'bg-blue-100 self-start' : 'bg-white self-end'
            }`}
          >
            {msg.content}
          </div>
        ))}
        {loading && messages.at(-1)?.content === '' && (
          <div className="text-gray-400 text-sm animate-pulse">جارٍ التفكير…</div>
        )}
      </div>
 
      <div className="flex gap-2">
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && !e.shiftKey && sendMessage()}
          placeholder="اكتب رسالتك…"
          className="flex-1 border rounded px-3 py-2 text-sm"
          disabled={loading}
        />
        <button
          onClick={loading ? () => abortRef.current?.abort() : sendMessage}
          className="px-4 py-2 bg-blue-600 text-white rounded text-sm"
        >
          {loading ? 'إيقاف' : 'إرسال'}
        </button>
      </div>
    </div>
  );
}

import Groq from 'groq-sdk';
import { z } from 'zod';
import { groq } from '@/lib/groq';
 
const tools: Groq.Chat.Completions.ChatCompletionTool[] = [
  {
    type: 'function',
    function: {
      name: 'get_weather',
      description: 'الحصول على الطقس الحالي لمدينة ما',
      parameters: {
        type: 'object',
        properties: {
          city: { type: 'string', description: 'اسم المدينة' },
          unit: { type: 'string', enum: ['celsius', 'fahrenheit'] },
        },
        required: ['city'],
      },
    },
  },
];
 
const WeatherArgs = z.object({
  city: z.string(),
  unit: z.enum(['celsius', 'fahrenheit']).default('celsius'),
});
 
async function getWeather(city: string, unit: string) {
  // استبدل بطلب API حقيقي للطقس في الإنتاج
  return { city, temperature: unit === 'celsius' ? 22 : 72, condition: 'مشمس' };
}
 
export async function chatWithTools(userMessage: string) {
  const messages: Groq.Chat.Completions.ChatCompletionMessageParam[] = [
    { role: 'user', content: userMessage },
  ];
 
  const response = await groq.chat.completions.create({
    model: 'llama-4-scout-17b-16e-instruct',
    messages,
    tools,
    tool_choice: 'auto',
  });
 
  const toolCalls = response.choices[0].message.tool_calls;
  if (!toolCalls?.length) {
    return response.choices[0].message.content;
  }
 
  const toolResults = await Promise.all(
    toolCalls.map(async tc => {
      const args = WeatherArgs.parse(JSON.parse(tc.function.arguments));
      const result = await getWeather(args.city, args.unit);
      return {
        tool_call_id: tc.id,
        role: 'tool' as const,
        content: JSON.stringify(result),
      };
    })
  );
 
  const finalResponse = await groq.chat.completions.create({
    model: 'llama-4-scout-17b-16e-instruct',
    messages: [
      ...messages,
      response.choices[0].message,
      ...toolResults,
    ],
  });
 
  return finalResponse.choices[0].message.content;
}

const CODING_ASSISTANT_PROMPT = `أنت مطوّر TypeScript وReact خبير.
- قدّم دائمًا أمثلة كود كاملة وقابلة للتشغيل
- اشرح المنطق وراء القرارات المعمارية
- أشر إلى مشكلات الأداء أو الثغرات الأمنية المحتملة
- اجعل التفسيرات موجزة لكن شاملة`;
 
const completion = await groq.chat.completions.create({
  model: 'llama-4-maverick-17b-128e-instruct',
  messages: [
    { role: 'system', content: CODING_ASSISTANT_PROMPT },
    { role: 'user', content: 'كيف أنفّذ التحديثات التفاؤلية في React Query v5؟' },
  ],
  max_tokens: 2048,
  temperature: 0.3,
});

import Groq from 'groq-sdk';
import { groq } from '@/lib/groq';
 
export async function safeGroqCompletion(
  messages: Groq.Chat.Completions.ChatCompletionMessageParam[],
  retries = 3
): Promise<string | null> {
  for (let attempt = 0; attempt < retries; attempt++) {
    try {
      const completion = await groq.chat.completions.create({
        model: 'llama-4-scout-17b-16e-instruct',
        messages,
        max_tokens: 1024,
      });
      return completion.choices[0].message.content;
    } catch (error) {
      if (error instanceof Groq.RateLimitError) {
        const delay = Math.pow(2, attempt) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
        continue;
      }
      if (error instanceof Groq.APIError) {
        console.error(`خطأ Groq API ${error.status}:`, error.message);
        return null;
      }
      throw error;
    }
  }
  return null;
}

export async function completionWithMetrics(prompt: string) {
  const start = Date.now();
 
  const completion = await groq.chat.completions.create({
    model: 'llama-4-scout-17b-16e-instruct',
    messages: [{ role: 'user', content: prompt }],
    max_tokens: 512,
  });
 
  const elapsed = (Date.now() - start) / 1000;
  const usage = completion.usage!;
 
  return {
    content: completion.choices[0].message.content,
    metrics: {
      totalTokens: usage.total_tokens,
      completionTokens: usage.completion_tokens,
      promptTokens: usage.prompt_tokens,
      elapsedSeconds: elapsed,
      tokensPerSecond: Math.round(usage.completion_tokens / elapsed),
    },
  };
}