Skip to content

Commit 619fdfe

Browse files
Merge pull request #3 from digitalstore2025/codex/design-smart-content-generation-dashboard
2 parents 8e66fb4 + d568ffe commit 619fdfe

2 files changed

Lines changed: 197 additions & 0 deletions

File tree

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# لوحة التحكم الإعلامية لإذاعة "صوت القدس" — نموذج أولي جاهز للبرمجة
2+
3+
يوثق هذا المستند نموذجًا أوليًا (low/medium fidelity) للوحة تحكم توليد محتوى لحظي. يشمل بنية الواجهة، تدفقات الاستخدام، التكامل مع نماذج الذكاء الاصطناعي، واستقبال الأخبار من مصادر خارجية (RSS/API)، مع خصائص النسخ والتصدير السريع.
4+
5+
## 1) أهداف المنتج
6+
- توليد محتوى عربي إذاعي/تحريري بسرعة مع ضبط النبرة (إذاعي، إخباري، مهني).
7+
- تحديث لحظي للأخبار (1 أو 5 دقائق) مع مرونة تخصيص الصيغة والإخراج.
8+
- تصدير سريع للنشر (نسخ فوري، ملفات، أو ربط مع قنوات توزيع).
9+
- حوكمة تحريرية: إبراز المصادر، حفظ سياق المراجعة البشرية، ومنع النشر الآلي غير المراقب.
10+
11+
## 2) خارطة الواجهة (مكونات رئيسية)
12+
1. **شريط علوي**: شعار الإذاعة + حالة الاتصال + مؤشر آخر تحديث.
13+
2. **لوحة التحكم السريعة** (يمين/يسار حسب اللغة):
14+
- اختيار نوع المحتوى: زرّ/قائمة (منشور، نشرة إذاعية، تغطية عاجلة، ملخّص تحليلي).
15+
- فترة التحديث: أزرار راديو (1 دقيقة، 5 دقائق) + خيار إيقاف/تشغيل التحديث التلقائي.
16+
- مصدر الأخبار: اختيار/بحث (RSS جاهز + مصادر API) مع شارة الموثوقية.
17+
- لغة الإخراج: عربي/ثنائي/إنجليزي.
18+
- نبرة التحرير: (إذاعي، رسمي، ميداني، تحليلي) مع وصف موجز.
19+
3. **لوحة الأخبار الحية**: جدول/بطاقات بعناوين الأخبار، المصدر، الزمن، الوسوم (عاجل/تحليلي). دعم فرز/بحث/تصفية.
20+
4. **منطقة الصياغة المدعومة بالذكاء الاصطناعي**:
21+
- حقل نصي متعدد الأسطر + عداد أحرف.
22+
- أزرار قوالب جاهزة (عاجل 🔴، نشرة 📻، تواصل اجتماعي 📱).
23+
- معلمات الذكاء الاصطناعي: مستوى الإيجاز/التفصيل، درجة الرسمية، إدراج اقتباسات، احترام دليل المصطلحات.
24+
- زر **توليد** + حالة انتظار/إشعار نجاح أو فشل.
25+
5. **التصدير السريع**:
26+
- **نسخ فوري** (Copy) مع رسالة نجاح.
27+
- **حفظ كملف** (TXT/HTML/Markdown).
28+
- **نشر عبر API** (Webhook/CMS/Social) مع مفتاح سري مخزّن آمنًا.
29+
- سجل آخر 10 مخارج محفوظة للتراجع أو الإعادة.
30+
6. **لوحة المراجعة والتحريرية**: حقل لملاحظات المراجع، حالة "مراجَع/غير مراجَع"، سجلات تغييرات مختصرة.
31+
32+
## 3) تدفقات الاستخدام الأساسية
33+
1. **اختيار نوع المحتوى** → يظهر نموذج الإعدادات المناسب (مثلاً النشرة الإذاعية تعرض مدة النشرة + فواصل صوتية).
34+
2. **التحديث اللحظي**: تحديد 1 أو 5 دقائق → اشتراك في WebSocket/Interval لجلب الأخبار → تحديث لوحة الأخبار الحية + مؤشر آخر تحديث.
35+
3. **التوليد**: اختيار عناصر إخبارية (Checkbox) → النقر "توليد" → إرسال Prompt للـ GPT API → عرض المسودة في منطقة الصياغة.
36+
4. **المراجعة**: تحرير النص يدويًا → تحديد الحالة "مراجَع" → إضافة ملاحظات.
37+
5. **التصدير**: نسخ/حفظ ملف/استدعاء Webhook → إشعار نجاح مع وقت التنفيذ.
38+
39+
## 4) التكامل مع نماذج الذكاء الاصطناعي (مثال تقني)
40+
- **إعدادات**: مفتاح API مشفّر، اختيار نموذج (GPT-4.x)، حدّ الطول، والتحكم في الـ temperature.
41+
- **مثال طلب (Node.js/Fetch)**:
42+
```js
43+
const body = {
44+
model: "gpt-4.1-mini",
45+
temperature: 0.4,
46+
messages: [
47+
{ role: "system", content: "أنت محرر إذاعي فلسطيني..." },
48+
{ role: "user", content: `
49+
لخص الأخبار التالية بنبرة إذاعية مهنية:
50+
- [${selectedItems.join(" | ")}]
51+
التنسيق: فقرة افتتاحية + 3 نقاط رئيسية + خاتمة دعوية قصيرة.
52+
راعِ دليل المصطلحات: الاحتلال/المقاومة/الأسرى...
53+
` }
54+
]
55+
};
56+
const res = await fetch("/api/ai/generate", { method: "POST", body: JSON.stringify(body) });
57+
const { content } = await res.json();
58+
```
59+
- **إدارة الأخطاء**: إشعارات صديقة، إعادة المحاولة، وضع عدم الاتصال (Offline Mode) يحفظ الطلبات ويرسلها لاحقًا.
60+
61+
## 5) استقبال الأخبار (RSS/API)
62+
- **جلب RSS**: مهمة مجدولة (CRON/Interval) لكل 1 أو 5 دقائق.
63+
- **تنظيف المحتوى**: إزالة الوسوم المكررة، اكتشاف اللغة، تصنيف (عاجل/رسمي/ميداني/تحليلي).
64+
- **نموذج بيانات مقترح**:
65+
```json
66+
{
67+
"id": "uuid",
68+
"source": "safa.ps",
69+
"title": "عنوان الخبر",
70+
"link": "https://...",
71+
"published_at": "2025-01-01T10:00:00Z",
72+
"language": "ar",
73+
"tags": ["عاجل", "ميداني"],
74+
"reliability": 4.5,
75+
"summary": "ملخص قصير",
76+
"body": "النص الكامل",
77+
"enriched": {
78+
"entities": ["غزة", "بيت لاهيا"],
79+
"locations": ["فلسطين"],
80+
"topics": ["سياسة", "ميداني"]
81+
}
82+
}
83+
```
84+
- **التخزين المؤقت**: IndexedDB أو LocalStorage للمتصفح + Cache API لضمان سرعة الواجهة.
85+
- **توحيد المصادر المحمية**: دعم RSS.app/FetchRSS مع مفاتيح منفصلة.
86+
87+
## 6) النسخ والتصدير
88+
- زر نسخ واضح أعلى منطقة الصياغة + تأكيد Toast.
89+
- زر "تنزيل" مع اختيار النوع (TXT/HTML/MD).
90+
- حقل Webhook URL + مفتاح سرّي للاستخدام مع CMS/شبكات اجتماعية.
91+
- سجل المخارج: جدول بالعناصر الأخيرة مع وقت التوليد، الحالة (مراجَع/غير مراجَع)، ومصدر البيانات.
92+
93+
## 7) إرشادات تصميم الواجهة
94+
- **تصميم RTL أولاً** مع دعم LTR.
95+
- ألوان: تباين عالٍ، حالات للمصدر (موثوق/محمي/محدود) عبر شارات.
96+
- حالات Loading/Empty/Error واضحة.
97+
- رموز واضحة: 🔴 للعاجل، 📻 للنشرة، 📱 للتواصل.
98+
- إمكانية تخصيص خط عربي مناسب للإذاعة (مثلاً "Cairo" أو "Noto Sans Arabic").
99+
100+
## 8) نموذج بيانات الإعدادات (Front-End)
101+
```ts
102+
type Settings = {
103+
contentType: "post" | "radio_bulletin" | "breaking" | "analysis";
104+
refreshIntervalSec: 60 | 300;
105+
autoRefresh: boolean;
106+
aiTone: "radio" | "official" | "field" | "analytical";
107+
language: "ar" | "ar_en" | "en";
108+
sources: string[];
109+
webhookUrl?: string;
110+
exportFormats: ("copy" | "txt" | "html" | "md" | "webhook")[];
111+
};
112+
```
113+
114+
## 9) نماذج قوالب التوليد (جاهزة للاستخدام)
115+
- **عاجل 🔴**: جملة افتتاحية + حدث رئيسي + مصدر + نداء للمتابعة.
116+
- **نشرة 📻**: مقدمة، 3-5 فقرات مختصرة مع توقيت، خاتمة دعوية قصيرة.
117+
- **تواصل اجتماعي 📱**: نص قصير، هاشتاقات، رابط مختصر.
118+
- جميع القوالب تلتزم بدليل المصطلحات: "الاحتلال"، "المقاومة"، "الأسرى"، وتجنب مصطلحات مضللة.
119+
120+
## 10) ملاحظات للتطوير/النشر
121+
- اعتماد مبدأ Offline-first + Sync عند الاتصال.
122+
- حماية المفاتيح الحساسة في الخادم أو مخزن أسرار.
123+
- رصد زمن التوليد والتحديث لقياس الأداء.
124+
- تسجيل التدخلات البشرية للحوكمة التحريرية.
125+

design/radio-dashboard-wireflow.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# لوحة التحكم الإعلامية — مخطط التدفق التفاعلي (Wireflow)
2+
3+
يوضح هذا المستند تدفق الشاشات والقرارات الرئيسية لبناء نموذج أولي تفاعلي (Figma/Webflow) للوحة التحكم الخاصة بإذاعة "صوت القدس". يركّز على كيفية انتقال المستخدم بين الخطوات، التحكم في التحديث اللحظي، والتكامل مع نماذج الذكاء الاصطناعي ومصادر الأخبار.
4+
5+
## 1) الشاشات الأساسية
6+
1. **شاشة البداية / تسجيل الدخول البسيط**
7+
- حقل مفتاح API (يُحفظ مشفّرًا في المتصفح أو عبر الخادم).
8+
- اختيار نموذج AI الافتراضي + زر "حفظ الإعدادات".
9+
2. **لوحة التحكم الرئيسية**
10+
- مؤشر آخر تحديث + حالة الاتصال (Online/Offline).
11+
- عناصر اختيار نوع المحتوى (منشور/نشرة إذاعية/عاجل/تحليلي).
12+
- إعداد فترة التحديث (1 أو 5 دقائق) + زر تشغيل/إيقاف التحديث التلقائي.
13+
- اختيار المصادر (RSS/API) بشارات موثوقية.
14+
- زر "فتح لوحة الأخبار" وزر "فتح منطقة الصياغة".
15+
3. **لوحة الأخبار الحية**
16+
- قائمة أو بطاقات بعناوين الأخبار + المصدر + زمن النشر + الوسوم.
17+
- فلاتر (عاجل/رسمي/ميداني/تحليلي) + بحث نصي.
18+
- خانة تحديد (Checkbox) لاختيار الأخبار التي ستُستخدم في التوليد.
19+
- زر "إرسال إلى الصياغة".
20+
4. **منطقة الصياغة المدعومة بالذكاء الاصطناعي**
21+
- حقل نصي متعدد الأسطر + عداد أحرف.
22+
- أزرار القوالب الجاهزة (عاجل 🔴 / نشرة 📻 / تواصل 📱).
23+
- معلمات AI: درجة الإيجاز، الرسمية، إدراج اقتباسات، احترام دليل المصطلحات.
24+
- زر "توليد" + حالة التحميل/النجاح/الخطأ.
25+
- حقل ملاحظات المراجع + حالة "مراجَع/غير مراجَع".
26+
5. **التصدير والمشاركة**
27+
- أزرار: نسخ، تنزيل (TXT/HTML/MD)، إرسال Webhook.
28+
- قائمة بالمخارج الأخيرة مع وقت التوليد والحالة.
29+
- زر "إعادة استخدام" لإعادة فتح المخرج في منطقة الصياغة.
30+
31+
## 2) تدفق المستخدم (Wireflow مبسط)
32+
1. تسجيل الدخول المفتاحي → حفظ الإعدادات → الانتقال للوحة التحكم.
33+
2. اختيار نوع المحتوى + فترة التحديث + المصادر → تشغيل التحديث التلقائي (Interval/WebSocket).
34+
3. فتح "لوحة الأخبار" → اختيار عناصر → "إرسال إلى الصياغة".
35+
4. ضبط القالب/النبرة → "توليد" → مراجعة النص → تغيير الحالة إلى "مراجَع".
36+
5. اختيار وسيلة الإخراج (نسخ/تنزيل/Webhook) → إشعار نجاح → سجل المخرجات يُحدّث.
37+
6. (اختياري) تعديل الإعدادات أو تبديل المصادر → إعادة توليد/تصدير.
38+
39+
## 3) عناصر تفاعلية مقترحة في Figma/Webflow
40+
- **Components**:
41+
- Buttons (Primary/Secondary/Danger) مع حالات Hover/Active/Disabled.
42+
- Cards للأخبار مع شارات موثوقية.
43+
- Tabs للفصل بين "الأخبار" و"الصياغة" و"التصدير".
44+
- Toasts للإشعارات (نجاح/خطأ/تنبيه اتصال).
45+
- Badges لوسوم المصدر والنوع (عاجل/تحليلي/رسمي).
46+
- **Interactions**:
47+
- Auto-Refresh Indicator يتغير كل 1 أو 5 دقائق.
48+
- Modal لطلب مفتاح API أو إعداد Webhook.
49+
- Sidebar قابل للطيّ يحتوي على التحكم السريع.
50+
- Animations خفيفة للتحميل والتبديل بين القوالب.
51+
52+
## 4) مخطط بيانات التفاعل (Events)
53+
- `onSourceSelect(sourceId)`: تحديث قائمة الاشتراك في جلب RSS/API.
54+
- `onIntervalChange(60|300)`: ضبط مؤقت التحديث وجدولة الجلب.
55+
- `onNewsSelect(ids[])`: حفظ العناصر المختارة للتوليد.
56+
- `onGenerate(settings, selectedNews)`: استدعاء API للذكاء الاصطناعي + تسجيل وقت الطلب.
57+
- `onExport(mode)`: تنفيذ نسخ/تنزيل/Webhook + إضافة سجل.
58+
- `onReview(status, notes)`: تحديث حالة المراجعة وحفظ الملاحظات محليًا/على الخادم.
59+
60+
## 5) توصيات تجربة الاستخدام
61+
- إبراز دليل المصطلحات في لوحة جانبية أو Tooltip.
62+
- عرض مصدر كل فقرة مولدة (إدراج روابط أو وسوم).
63+
- دعم لوحة مفاتيح (اختصارات للنسخ، توليد، تبديل القوالب).
64+
- تخزين Draft محليًا تلقائيًا لمنع فقدان العمل.
65+
- إظهار زمن الاستجابة من الـ AI لإدارة التوقعات.
66+
67+
## 6) متطلبات تسليم التصميم
68+
- ملف Figma أو Webflow يتضمن:
69+
- صفحات الشاشات الخمس أعلاه.
70+
- مكونات قابلة لإعادة الاستخدام (Design System مصغر).
71+
- تفاعلات Click/Hover/Auto-Refresh موثقة.
72+
- تصدير Prototype Link للمطورين مع ملاحظات (Dev Mode).

0 commit comments

Comments
 (0)