يأتي GPT-5.5 من OpenAI مع واجهة برمجة تطبيقات مدفوعة: 5 دولارات لكل مليون رمز إدخال، و30 دولارًا لكل مليون رمز إخراج. إذا كنت تبني مشروعًا جانبيًا، نموذجًا أوليًا لهاكاثون، أو تطبيقًا عامًا مجانيًا، فقد تصبح الفاتورة عائقًا قبل الإطلاق. الحل العملي هنا هو Puter.js: مكتبة تعمل من المتصفح وتتيح الوصول إلى كتالوج OpenAI مثل GPT-5.5 وGPT-5.5 Pro ونماذج GPT-5.x وGPT-Image-2 وDALL-E وOpenAI TTS بدون مفتاح OpenAI، مع تحميل تكلفة الاستخدام على المستخدم النهائي عبر حساب Puter.
ملخص سريع
- Puter.js يمنح المطورين وصولًا إلى نماذج OpenAI من المتصفح بدون مفتاح API أو خادم.
- النماذج النصية تشمل:
gpt-5.5,gpt-5.5-pro,gpt-5.4,gpt-5,gpt-5-mini,o1,o3,gpt-4.1,gpt-4o، ومتغيرات الدردشة والكودكس. - الصور:
gpt-image-2,gpt-image-1.5,dall-e-3. - تحويل النص إلى كلام:
gpt-4o-mini-tts,tts-1,tts-1-hd. - التثبيت يمكن أن يكون عبر وسم
<script>واحد. - الميزات المدعومة تشمل البث، الرؤية، استدعاء الدوال، توليد الصور، وتحويل النص إلى كلام.
- يدفع المستخدم النهائي من حساب Puter الخاص به، وليس حساب المطور.
- استخدم Apidog لمقارنة نفس الـ prompt بين Puter وواجهة OpenAI API الرسمية عند التخطيط للترحيل.
كيف يعمل نموذج “مجاني غير محدود”
Puter.js يغيّر طريقة الفوترة. بدلًا من أن تضع مفتاح OpenAI داخل مشروعك وتدفع تكلفة كل طلب، يسجل المستخدم الدخول إلى Puter، وتُخصم تكلفة الطلب من رصيده هو.
هذا يعني عمليًا:
- لا تحتاج إلى حساب OpenAI داخل المشروع.
- لا يوجد مفتاح API داخل الواجهة الأمامية أو المستودع.
- لا تتحمل أنت فاتورة الاستخدام.
- كل مستخدم يعمل من خلال حساب Puter الخاص به.
المقايضة المهمة: Puter مناسب أساسًا لتطبيقات المتصفح. إذا كنت تحتاج إلى تنفيذ الطلبات من خادم Node.js، أو jobs، أو webhooks، فواجهة OpenAI API الرسمية تبقى الخيار الصحيح.
الخطوة 1: التثبيت
أبسط طريقة هي استخدام CDN:
<script src="https://js.puter.com/v2/"></script>
مثال HTML كامل:
<!DOCTYPE html>
<html lang="ar">
<body>
<script src="https://js.puter.com/v2/"></script>
</body>
</html>
إذا كنت تستخدم bundler في تطبيق حديث:
npm install @heyputer/puter.js
ثم:
import { puter } from '@heyputer/puter.js';
استخدم CDN للنماذج الأولية والمواقع الثابتة وإضافات المتصفح. استخدم نسخة NPM إذا كنت تريد تكاملًا أفضل مع TypeScript وبيئة build.
الخطوة 2: اختر النموذج المناسب
Puter يعرض نماذج GPT-5.x إلى جانب النماذج الأقدم. استخدم هذا الجدول كبداية:
| معرف النموذج | متى تستخدمه |
|---|---|
gpt-5.5-pro |
الاستدلال العميق، وكلاء البرمجة، التحليل المعقد |
gpt-5.5 |
النموذج الافتراضي لمعظم مهام الدردشة والاستدلال اليومي |
gpt-5.4-nano |
مهام التصنيف السريعة والرخيصة بكميات كبيرة |
gpt-5.4-mini |
واجهات الدردشة التي تحتاج توازنًا بين السرعة والجودة |
gpt-5.3-codex |
مهام البرمجة والكود |
o3 |
سلاسل الاستدلال الطويلة والمعقدة |
o1-pro |
التخطيط متعدد الخطوات |
gpt-4.1, gpt-4o, gpt-4o-mini
|
خط أساس مستقر ومفهوم جيدًا |
لنماذج الصور:
-
gpt-image-2: الأحدث لتوليد الصور. -
gpt-image-1.5,gpt-image-1,dall-e-3,dall-e-2: خيارات أقدم ومستقرة.
لنماذج تحويل النص إلى كلام:
-
gpt-4o-mini-tts: خيار حديث وطبيعي. -
tts-1,tts-1-hd: خيارات TTS كلاسيكية بزمن استجابة أقل.
الخطوة 3: نفّذ أول طلب إلى GPT-5.5
هذا هو الحد الأدنى لاستدعاء الدردشة:
<!DOCTYPE html>
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
"Explain WebSockets in three sentences",
{ model: "gpt-5.5" }
).then(response => {
puter.print(response);
});
</script>
</body>
</html>
افتح الملف في المتصفح. سيعالج Puter الطلب، ويطلب من المستخدم تسجيل الدخول أو إنشاء حساب Puter عند الحاجة، ثم يطبع الرد في الصفحة.
لا يوجد:
- مفتاح API
- متغيرات بيئة
- خادم وسيط
- إعداد فوترة من جانبك
الخطوة 4: بث الاستجابة Streaming
لواجهات الدردشة، استخدم stream: true حتى يرى المستخدم الرد أثناء توليده:
const response = await puter.ai.chat(
"Explain the theory of relativity in detail",
{
model: "gpt-5.5",
stream: true
}
);
for await (const part of response) {
puter.print(part?.text);
}
في تطبيق حقيقي، بدلًا من puter.print، أضف part.text إلى عنصر الرسالة داخل واجهة المستخدم:
const messageEl = document.querySelector("#assistant-message");
for await (const part of response) {
messageEl.textContent += part?.text || "";
}
الخطوة 5: إدخال الصور Vision
يمكنك تمرير رابط صورة كوسيط ثانٍ، ثم طرح سؤال متعلق بها:
puter.ai.chat(
"What do you see in this image? Describe colors, objects, and mood.",
"https://assets.puter.site/doge.jpeg",
{ model: "gpt-5.5" }
).then(response => {
puter.print(response);
});
حالات الاستخدام العملية:
- توليد
alt text - تحليل لقطات الشاشة
- OCR مبسط
- أسئلة وأجوبة حول الصور
- أدوات وصول لذوي الاحتياجات الخاصة
الخطوة 6: توليد الصور
توليد الصور يتم عبر txt2img. الدالة تعيد عنصر <img> جاهزًا للإضافة إلى الصفحة:
puter.ai.txt2img(
"A futuristic cityscape at night, cinematic, neon, rain",
{ model: "gpt-image-2" }
).then(imageElement => {
document.body.appendChild(imageElement);
});
مثال أكثر عملية مع زر:
<input id="prompt" placeholder="اكتب وصف الصورة" />
<button id="generate">توليد</button>
<div id="result"></div>
<script>
document.querySelector("#generate").addEventListener("click", async () => {
const prompt = document.querySelector("#prompt").value;
const image = await puter.ai.txt2img(prompt, {
model: "gpt-image-2"
});
const result = document.querySelector("#result");
result.innerHTML = "";
result.appendChild(image);
});
</script>
يدفع المستخدم تكلفة توليد الصورة من رصيده في Puter، وليس من حسابك.
الخطوة 7: تحويل النص إلى كلام TTS
استخدم txt2speech لتوليد ملف صوتي من النص:
puter.ai.txt2speech(
"Welcome back. Your account balance is $1,247.50.",
{
provider: "openai",
model: "gpt-4o-mini-tts"
}
).then(audio => {
audio.setAttribute("controls", "");
document.body.appendChild(audio);
});
استخدمه في:
- المساعدات الصوتية
- قراءة التنبيهات
- مقدمات البودكاست
- السرد داخل التطبيقات
- ميزات الوصول accessibility
الخطوة 8: استدعاء الدوال Function Calling
يدعم Puter شكل OpenAI القياسي لتعريف الأدوات. تعرّف الدوال، يطلب النموذج استدعاء أداة، ثم تنفذها أنت في التطبيق.
const tools = [{
type: "function",
function: {
name: "get_weather",
description: "Get the current weather for a city.",
parameters: {
type: "object",
properties: {
city: { type: "string" }
},
required: ["city"]
}
}
}];
const response = await puter.ai.chat(
"What's the weather in Tokyo right now?",
{
model: "gpt-5.5",
tools
}
);
const toolCalls = response.message.tool_calls;
if (toolCalls?.length) {
const call = toolCalls[0];
console.log(call.function.name);
console.log(call.function.arguments);
// نفّذ الدالة من جانبك، ثم أرسل النتيجة للنموذج إذا احتجت إلى رد نهائي.
}
هذا مفيد إذا كنت تريد ربط النموذج بعمليات مثل:
- البحث داخل قاعدة بيانات
- استدعاء API داخلي
- جلب حالة طلب
- حساب سعر
- التحقق من توفر منتج
شكل استدعاء الدوال قريب من OpenAI، لذلك يمكن نقل تعريفات الأدوات الحالية بسهولة. لاختبار تدفقات تعتمد على الأدوات في إعدادات بجودة إنتاجية، راجع اختبار خادم MCP في Apidog.
الخطوة 9: ضبط temperature و max_tokens
مرر إعدادات OpenAI الشائعة داخل كائن الخيارات:
const response = await puter.ai.chat(
"Tell me about Mars",
{
model: "gpt-5.5",
temperature: 0.2,
max_tokens: 200
}
);
إرشادات سريعة:
- استخدم
temperature: 0.0إلى0.3للإجابات الواقعية والمتسقة. - استخدم
temperature: 0.7إلى1.0للكتابة الإبداعية. - استخدم
max_tokensلتحديد طول الرد وتقليل الهدر. - في تطبيق عام، اجعل
max_tokensمحدودًا حتى لا يستهلك المستخدم رصيده بسرعة.
ما الذي تحصل عليه وما الذي لا تحصل عليه
الوصول إلى GPT-5.5 عبر Puter مفيد، لكنه ليس نسخة كاملة من كل سطح OpenAI API الرسمي.
ما تحصل عليه
- نماذج GPT-5.x بما في ذلك
gpt-5.5وgpt-5.5-pro. - نماذج OpenAI الأقدم مثل
gpt-4.1,gpt-4o,o1,o3. - توليد الصور عبر GPT-Image وDALL-E.
- تحويل النص إلى كلام عبر نماذج OpenAI TTS.
- البث Streaming.
- الرؤية Vision.
- استدعاء الدوال Function Calling.
- التحكم في
temperatureوmax_tokens. - تشغيل مباشر من المتصفح بدون خادم.
ما قد لا تحصل عليه
- Responses API الرسمية.
- التخزين المؤقت للموجهات Prompt Caching.
- Files API.
- تشغيل مريح من الخادم بدون جلسة مستخدم.
- رؤوس حدود المعدل المباشرة من OpenAI.
- وضع الإخراج المنظم الكامل وفرض JSON Schema كما في OpenAI الرسمية.
إذا كان تطبيقك يعتمد على المتصفح، فـ Puter خيار سريع. إذا كنت تبني بنية خلفية أو نظامًا إنتاجيًا عميقًا، فاستخدم OpenAI API الرسمية.
متى تستخدم Puter ومتى تستخدم OpenAI API الرسمية
استخدم Puter عندما:
- تبني تطبيقًا عامًا مجانيًا ولا تريد تحمل الفاتورة.
- تعمل على نموذج أولي سريع.
- تشارك في هاكاثون.
- تنشر موقعًا ثابتًا أو إضافة متصفح.
- لا تريد إعداد خادم وسيط.
- يمكن للمستخدمين تسجيل الدخول إلى Puter.
استخدم OpenAI API الرسمية عندما:
- تحتاج إلى تشغيل الطلبات من الخادم.
- لديك jobs أو cron tasks أو webhooks.
- تحتاج إلى batch processing.
- تحتاج إلى Prompt Caching.
- تحتاج إلى Responses API أو Files API.
- تحتاج إلى مخرجات منظمة صارمة.
- لديك متطلبات امتثال أو عقود مؤسسية.
- لا تريد فرض تسجيل دخول Puter على المستخدم.
كثير من المشاريع تبدأ بـ Puter للنمذجة السريعة، ثم تنتقل إلى OpenAI API الرسمية عند الوصول إلى حدود المتصفح أو متطلبات الإنتاج.
لإعداد إنتاجي مدفوع، راجع كيفية استخدام GPT-5.5 API.
اختبار الدمج في Apidog
مكالمات Puter تحدث داخل المتصفح، لذلك لا تختبرها مثل REST API خلفية مباشرة. النمط العملي هو:
- أنشئ صفحة HTML صغيرة تستخدم Puter.
- اجعل الـ prompt يأتي من query parameter.
- استخدم Apidog لاختبار OpenAI API الرسمية عند التخطيط للترحيل.
- احتفظ ببيئتين منفصلتين: واحدة للنموذج الأولي وواحدة للإنتاج.
مثال صفحة اختبار بسيطة:
<!DOCTYPE html>
<html>
<body>
<pre id="output"></pre>
<script src="https://js.puter.com/v2/"></script>
<script>
const params = new URLSearchParams(location.search);
const prompt = params.get("prompt") || "Say hello";
puter.ai.chat(prompt, {
model: "gpt-5.5"
}).then(response => {
document.querySelector("#output").textContent = response;
});
</script>
</body>
</html>
بعد ذلك يمكنك تشغيلها هكذا:
http://localhost:5173/?prompt=Explain%20JWT%20in%203%20points
قم بتنزيل Apidog وأنشئ بيئتين:
-
puter-prototype: عنوان محلي يستضيف صفحة Puter. -
openai-prod: مثلhttps://api.openai.com/v1.
بهذا تستطيع مقارنة السلوك، ثم الترحيل عندما يصبح المشروع جاهزًا. لأنماط اختبار API الأوسع، راجع أداة اختبار API لمهندسي ضمان الجودة.
الأسئلة الشائعة
هل هذا غير محدود فعلًا؟
غير محدود من جانب المطور. المستخدم النهائي يستخدم رصيد حسابه في Puter. الحسابات الجديدة تحصل على رصيد بدء، ويمكن للمستخدم إعادة الشحن عند الحاجة.
هل أحتاج إلى حساب OpenAI؟
لا. Puter يدير الاتصال بواجهة OpenAI API. أنت لا ترى مفتاح OpenAI ولا تخزنه.
هل يمكن استخدامه في الإنتاج؟
نعم، لتطبيقات المتصفح. السؤال العملي هو: هل يقبل المستخدمون تسجيل الدخول إلى Puter؟ إذا كانت الإجابة نعم، يمكنك نشره.
هل أداء GPT-5.5 عبر Puter هو نفسه API الرسمية؟
إخراج النموذج نفسه من حيث السلوك العام، لأن Puter يستدعي OpenAI نيابة عن المستخدم. قد يزيد زمن الاستجابة قليلًا بسبب طبقة Puter.
ماذا عن Prompt Caching؟
لا يعرض Puter ضوابط Prompt Caching مثل OpenAI الرسمية. إذا كان لديك system prompt كبير وثابت وتحتاج إلى خصومات التخزين المؤقت، فاستخدم OpenAI API الرسمية.
هل يمكن استخدام Puter من خدمة خلفية؟
ليس بسلاسة. Puter مصمم أساسًا للمتصفح ويفترض وجود جلسة مستخدم. للخدمات الخلفية، استخدم OpenAI API الرسمية. لخيارات مجانية من جانب الخادم، راجع كيفية استخدام GPT-5.5 API مجانًا.
ما النموذج الافتراضي المناسب؟
- استخدم
gpt-5.5لمعظم مهام الدردشة والاستدلال. - استخدم
gpt-5.4-nanoللتصنيف السريع بكميات كبيرة. - استخدم
gpt-5.5-proللمهام الصعبة. - استخدم
o3لسلاسل الاستدلال الطويلة.
هل يمكن أن تكون التكلفة عالية على المستخدمين؟
معظم استخدامات الدردشة تستهلك تكلفة صغيرة لكل جلسة. توليد الصور أغلى عادة، لذلك حدّد max_tokens للنصوص، وتجنب الطلبات غير الضرورية، وأظهر للمستخدم ما الذي سيحدث قبل تنفيذ عمليات مكلفة.
هل يمكن توليد الصور باستخدام Puter؟
نعم، عبر txt2img باستخدام gpt-image-2 أو DALL-E. يدفع المستخدم من رصيده في Puter. للدليل الرسمي لواجهة API المدفوعة، راجع كيفية استخدام GPT-Image-2 API.
خلاصة القول
Puter.js يمنحك طريقة سريعة لبناء تطبيقات متصفح تستخدم نماذج OpenAI بدون مفتاح API وبدون خادم وبدون تحمل فاتورة الاستخدام. أضف السكربت، اختر النموذج، ثم نفّذ puter.ai.chat.
إذا كنت تبني:
- نموذجًا أوليًا
- مشروع هاكاثون
- أداة عامة مجانية
- موقعًا ثابتًا
- إضافة متصفح
فـ Puter خيار عملي للبدء بسرعة.
أما إذا كنت تحتاج إلى تشغيل من الخادم، أو Prompt Caching، أو Responses API، أو مخرجات منظمة صارمة، فواجهة OpenAI API الرسمية هي المسار الأنسب.
أنشئ الطلب مرة واحدة في Apidog، وقارن Puter مقابل واجهة API الرسمية، ثم اختر المسار الذي يناسب بنية تطبيقك.

Top comments (0)