الملفات الأساسية
Signed-off-by: Mohamed-Abdelhalim2 <codepen.io.dropper985@passinbox.com>
هذا الالتزام موجود في:
135
README.md
135
README.md
@@ -1,3 +1,134 @@
|
||||
# non-destructive-text-image-editor
|
||||
# ستيجانو بكسل (SteganoPixel) - حبر الصور الرقمي
|
||||
|
||||
مشروع لبناء يوتيوب مصمم لمتابعة من تريد وما تحتاجه دون ملل وتصنيف الفيديوهات وجدولتها في أهدافك وخوارزمية معينة تصنيف الفيديوهات
|
||||
|
||||
|
||||
**تطبيق ويب عربي احترافي لإخفاء النصوص السرية داخل الصور الرقمية رقمياً (LSB Steganography)، واستخراجها أو إزالة دمجها بأمان تام داخل المتصفح.**
|
||||
|
||||
---
|
||||
|
||||
## 1. اسم المشروع والهوية البصرية
|
||||
|
||||
* **اسم المشروع المعتمد:** **ستيجانو بكسل (SteganoPixel)**. يعكس هذا الاسم بدقة دمج علم الإخفاء الرقمي (Steganography) مع أصغر وحدة بنائية في الصور الرقمية (Pixel).
|
||||
* **الشعار / الأيقونة (Iconography Design System):**
|
||||
* **الفلسفة البصرية:** تصميم يعتمد على دمج «قطرة الحبر السري» مع «مصفوفة البكسلات الرقمية»، ليعبر عن تضمين البيانات الخفية داخل الألوان.
|
||||
* **الألوان الرئيسية:**
|
||||
* **البنفسجي الملكي (Royal Violet):** `#7C3AED` (يعبر عن الغموض، الإبداع، والذكاء البرمجي).
|
||||
* **النيلي الساطع (Bright Indigo):** `#4F46E5` (يضيف طابعاً تقنياً وعصرياً للتطبيق).
|
||||
* **الألوان الثانوية (الخلفيات والتنبيهات):**
|
||||
* **الأبيض النقي (Pure White):** `#FFFFFF` (للحاويات الشفافة الزجاجية Backdrop-Blur).
|
||||
* **الأردوازي الداكن (Dark Slate):** `#0F172A` (للنصوص الأساسية والأزرار المحورية).
|
||||
* **الأخضر الزمردي (Emerald Green):** `#10B981` (للدلالة على نجاح عمليات التشفير والاستخراج).
|
||||
* **الأحمر الوردي (Rose Red):** `#F43F5E` (للتنبيهات والأخطاء وتجاوز السعة).
|
||||
* **الشكل الهندسي والحواف:**
|
||||
* يعتمد الشعار وحاويات التطبيق على هندسة الحواف فائقة النعومة (**Super-Rounded Corners / Squircle**) بنصف قطر يصل إلى `32px` (`rounded-[2rem]` و `rounded-3xl`)، ما يعطي راحة بصرية فائقة ويحاكي تصاميم أنظمة التشغيل الحديثة.
|
||||
* **الرمز المستخدم:**
|
||||
* الحرف **`S`** (بخط عريض استثنائي Black) مدمج داخل كبسولة بكسلية تتدرج ألوانها من البنفسجي إلى النيلي، مع إشعاع خلفي خفيف (Glow).
|
||||
* **التدرجات اللونية (Gradients):**
|
||||
* تدرج شعاعي شبكي في الخلفية العامة: `radial-gradient(circle at top, rgba(124,58,237,0.16), transparent 34%)` مدمج مع `linear-gradient(180deg, #f8fafc, #eef2ff 45%, #ffffff)`.
|
||||
* **المواصفات التقنية للأيقونة:**
|
||||
* **دقة متناهية (High-DPI Ready):** مصممة بالكامل باستخدام متجهات Vector SVG لتكون حادة وغير مبكسلة بجميع المقاسات من المقاس المجهري `16×16` وحتى المقاس العملاق `1024×1024`.
|
||||
* **خفة الأداء:** لا تستهلك موارد وحدة المعالجة المركزية (CPU) أو معالج الرسوميات (GPU) بفضل اعتمادها على تأثيرات CSS Native سريعة التصيير.
|
||||
* **الفهم الفوري:** بمجرد نظر المستخدم للأيقونة والواجهة، يدرك فوراً أن التطبيق يتعامل مع حماية وتشفير البيانات داخل ملفات الصور.
|
||||
|
||||
---
|
||||
|
||||
## 2. نظرة عامة على المشروع وأهدافه
|
||||
|
||||
يهدف **SteganoPixel** إلى توفير أداة أمنية وتشفيرية مجانية ومفتوحة المصدر للمستخدمين العرب، تتيح لهم تبادل المعلومات الحساسة أو إثبات ملكية الصور (Watermarking الرقمي) دون إثارة أي شكوك بصرية.
|
||||
|
||||
### الأهداف الرئيسية:
|
||||
1. **الإخفاء البصري التام:** تضمين نصوص ضخمة داخل الصور دون أي تغيير يذكر في جودتها أو مظهرها العام.
|
||||
2. **الخصوصية المطلقة (Zero-Server Architecture):** إجراء كافة عمليات المعالجة، التشفير، وفك التشفير داخل متصفح المستخدم (Client-Side) دون رفع أي بايت إلى خوادم خارجية.
|
||||
3. **التعقيم وإزالة الدمج (Sanitization):** منح المستخدم القدرة على تدمير البيانات المضمنة في أي صورة وإنتاج نسخة «نظيفة» تماماً لمنع الأطراف الأخرى من قراءتها.
|
||||
4. **تجربة استخدام استثنائية (UI/UX):** واجهة عربية جذابة وسريعة الاستجابة تعمل بكفاءة على الهواتف والأجهزة المكتبية بدون تثبيت.
|
||||
|
||||
---
|
||||
|
||||
## 3. لغات البرمجة المستخدمة وهندسة الترابط
|
||||
|
||||
تم بناء المشروع باستخدام أحدث تقنيات الويب القياسية المترابطة بإحكام:
|
||||
|
||||
* **TypeScript (TSX / TS):** اللغة الأساسية للمشروع. توفر تنميطاً صارماً (Strict Typing) يمنع الأخطاء البرمجية أثناء التطوير ويحكم ترابط واجهات React مع محرك الإخفاء.
|
||||
* **React 18:** مكتبة بناء واجهات المستخدم. تدير الحالة التفاعلية (State Management) مثل مراحل رفع الصور، تقدم التشفير، وعرض النتائج الفورية.
|
||||
* **Tailwind CSS v4:** إطار عمل الأنماط الذري. يُستخدم لبناء الهوية البصرية التجاوبية وتطبيق تأثيرات الزجاج (Glassmorphism) والتدرجات دون كتابة ملفات CSS مطولة.
|
||||
* **HTML5 (Canvas & File API):** توفر البنية الأساسية للمستند وتقنيات قراءة الملفات المحلية، إضافة إلى محرك `<canvas>` الذي يسمح بالتلاعب المباشر في مصفوفة بكسلات الصور (`ImageData`).
|
||||
|
||||
### كيف تترابط هذه اللغات؟
|
||||
1. يستقبل **HTML5** ملف الصورة من المستخدم عبر السحب والإفلات.
|
||||
2. يلتقط **React** الملف ويحوله إلى كائن مرئي، بينما يُطبق **Tailwind CSS** أنماط التحميل التفاعلية.
|
||||
3. يقوم كود **TypeScript** بنقل الصورة إلى عنصر `<canvas>` غير مرئي لقراءة البكسلات الخام (Red, Green, Blue).
|
||||
4. يتدخل محرك الإخفاء لتعديل البتات، ثم يعيد المحتوى إلى **React** الذي يعرض زر التنزيل لملف الـ PNG الجديد.
|
||||
|
||||
---
|
||||
|
||||
## 4. هيكل المجلدات والملفات
|
||||
|
||||
```text
|
||||
steganopixel/
|
||||
├── public/ # الملفات العامة (الأيقونات والصور الثابتة)
|
||||
├── src/ # الكود المصدري الأساسي
|
||||
│ ├── utils/ # الأدوات والمحركات المستقلة
|
||||
│ │ ├── steganography.ts # محرك التشفير والإخفاء وإزالة الدمج (LSB Engine)
|
||||
│ │ └── cn.ts # أداة دمج وتوحيد أصناف Tailwind (إن وجدت)
|
||||
│ ├── App.tsx # المكون التفاعلي الرئيسي (واجهة المستخدم الشاملة)
|
||||
│ ├── main.tsx # نقطة إطلاق تطبيق React وربطه بالمستند
|
||||
│ └── index.css # الأنماط الجذرية وإعدادات الخطوط
|
||||
├── index.html # مستند الـ HTML الرئيسي وتعاريف الـ Meta/SEO
|
||||
├── package.json # قائمة الاعتمادات (Dependencies) وسكربتات التشغيل
|
||||
├── tsconfig.json # إعدادات مترجم TypeScript
|
||||
└── vite.config.ts # إعدادات حاقن ومجمع الكود Vite
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. متطلبات التشغيل والتثبيت (Dependencies & Setup)
|
||||
|
||||
### المتطلبات الأساسية:
|
||||
* **Node.js**: الإصدار 18.0.0 فما فوق.
|
||||
* **NPM** أو **Yarn** أو **PNPM** لإدارة الحزم.
|
||||
* متصفح ويب حديث يدعم `HTML5 Canvas` (Chrome, Firefox, Safari, Edge).
|
||||
|
||||
### الاعتمادات (Dependencies):
|
||||
* `react` & `react-dom` (v18+): نواة التطبيق.
|
||||
* `tailwindcss` (v4+): لتنسيق الواجهات.
|
||||
* `@tailwindcss/vite`: إضافة التجميع السريع.
|
||||
* `typescript`: للمترجم والتنميط.
|
||||
|
||||
### خطوات التثبيت والتشغيل المحلي:
|
||||
|
||||
1. **استنساخ أو تحميل المشروع:**
|
||||
```bash
|
||||
git clone https://github.com/your-username/steganopixel.git
|
||||
cd steganopixel
|
||||
```
|
||||
|
||||
2. **تثبيت الحزم والاعتمادات:**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **تشغيل خادم التطوير المحلي (Development Server):**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
*سيفتح التطبيق تلقائياً في متصفحك على الرابط: `http://localhost:5173`*
|
||||
|
||||
4. **بناء المشروع للإنتاج (Production Build):**
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
*ستجد الملفات النهائية المحسنة داخل مجلد `dist/` جاهزة للرفع على أي استضافة (Vercel, Netlify, GitHub Pages).*
|
||||
|
||||
---
|
||||
|
||||
## 6. التعليقات التوضيحية للأجزاء المتصلة (Architectural Commentary)
|
||||
|
||||
### محرك الإخفاء الرقمي (`src/utils/steganography.ts`)
|
||||
يعمل هذا الجزء كمحرك أساسي لمعالجة الصور والتلاعب الدقيق في البتات (Bitwise Operations) على مستوى مصفوفة البكسلات (`Uint8ClampedArray`). يعتمد المنطق على تقنية Least Significant Bit (LSB)، حيث يتم استبدال البت الأقل أهمية في القنوات اللونية (أحمر، أخضر، أزرق) بالبتات المكونة للنص المراد إخفاؤه. هذا يضمن عدم تأثر الجودة البصرية للصورة الأصلية، حيث أن التغير في قيمة أي قناة لونية لا يتجاوز درجة واحدة (`±1`)، وهو ما تعجز العين البشرية عن تمييزه.
|
||||
|
||||
يتفاعل هذا المحرك بشكل مباشر مع واجهة المستخدم في `App.tsx` من خلال ثلاث وظائف رئيسية: `embedTextInImageData` لتضمين النص، و `extractHiddenTextFromImageData` لقراءة النص وتفكيك التشفير، و `removeHiddenTextFromImageData` لتنظيف الصورة وتصفير البتات المستخدمة. يجب على المطورين مراعاة أن هذا المحرك يفترض أن مصفوفة البيانات (`ImageData`) غير مضغوطة ضغطاً ضياعياً (Lossless) أثناء دورة حياتها، لذا نستخدم دائماً صيغة PNG عند التصدير لضمان عدم ضياع البتات الدقيقة.
|
||||
|
||||
### واجهة المستخدم الرئيسية (`src/App.tsx`)
|
||||
يمثل هذا الجزء الواجهة التفاعلية الشاملة لتطبيق "SteganoPixel"، حيث يجمع بين طبقة العرض (`React` & `Tailwind CSS`) وطبقة المعالجة المنطقية (`Steganography Engine`). يتيح المكون للمستخدمين التنقل بسلاسة بين نمطين أساسيين: نمط "الإخفاء" لدمج النصوص السرية داخل الصور المرفوعة، ونمط "الاستخراج/التنظيف" لقراءة النصوص المضمنة مسبقاً أو تدميرها نهائياً. يتم إدارة جميع الحالات التفاعلية (معاينة الصور، أخطاء الإدخال، تقدم العمليات، وحالة النسخ إلى الحافظة) محلياً داخل المتصفح.
|
||||
|
||||
يتفاعل المكون مع محرك الإخفاء الرقمي من خلال تحويل ملفات الصور المرفوعة (`File API`) إلى عناصر مرئية (`HTMLImageElement`) ثم رسمها على كائن `<canvas>` في الذاكرة لاستخلاص مصفوفة البكسلات الخام (`ImageData`). يتم تمرير هذه المصفوفة إلى دوال التشفير أو فك التشفير، ثم يعاد تجميع النتيجة في ملف `Blob` بصيغة `image/png` وتوليد رابط محلي (`URL.createObjectURL`) لتمكين المستخدم من تنزيل الصورة الناتجة بأمان تام ودون أي اتصال بخوادم خارجية.
|
||||
|
||||
2563
package-lock.json
مولّد
Normal file
2563
package-lock.json
مولّد
Normal file
تم حذف اختلاف الملف لأن الملف كبير جداً
تحميل الاختلاف
28
package.json
Normal file
28
package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "react-vite-tailwind",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "2.1.1",
|
||||
"react": "19.2.6",
|
||||
"react-dom": "19.2.6",
|
||||
"tailwind-merge": "3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "4.1.17",
|
||||
"@types/node": "22.19.17",
|
||||
"@types/react": "19.2.7",
|
||||
"@types/react-dom": "19.2.3",
|
||||
"@vitejs/plugin-react": "5.1.1",
|
||||
"tailwindcss": "4.1.17",
|
||||
"typescript": "5.9.3",
|
||||
"vite": "7.3.2",
|
||||
"vite-plugin-singlefile": "2.3.0"
|
||||
}
|
||||
}
|
||||
31
tsconfig.json
Normal file
31
tsconfig.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"types": ["node"],
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Path mapping */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src", "vite.config.ts"]
|
||||
}
|
||||
19
vite.config.ts
Normal file
19
vite.config.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import path from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { defineConfig } from "vite";
|
||||
import { viteSingleFile } from "vite-plugin-singlefile";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss(), viteSingleFile()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "src"),
|
||||
},
|
||||
},
|
||||
});
|
||||
المرجع في مشكلة جديدة
حظر مستخدم