Spaces:

fastpro
/

REHAN

Running

App Files Files Community

joermd commited on Jul 14, 2025

Commit

e515a9f

verified ·

1 Parent(s): 9a1ffcf

Update index.html

Browse files

Files changed (1) hide show

index.html +65 -41

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <title>تحويل صورة إلى نص - OCR</title>
     <style>
         body { font-family: Arial; margin: 40px; }
         label, button { display: block; margin-top: 15px; }
@@ -10,60 +10,84 @@
     </style>
 </head>
 <body>
-    <h2>تحويل صورة إلى نص (OCR)</h2>
-    <form id="ocr-form">
-        <label>اختر صورة:
-            <input type="file" id="image-input" accept="image/*" required>
         </label>
-        <button type="submit">رفع وتحويل</button>
     </form>
     <div id="result"></div>
     <script>
-        document.getElementById('ocr-form').addEventListener('submit', async function(event) {
             event.preventDefault();
             const resultDiv = document.getElementById('result');
-            resultDiv.textContent = "جاري التحويل...";
             const fileInput = document.getElementById('image-input');
-            if (!fileInput.files.length) {
-                resultDiv.textContent = "اختر صورة أولاً.";
                 return;
             }
-            // تحويل الصورة إلى base64
-            const file = fileInput.files[0];
-            const reader = new FileReader();
-            reader.onload = async function() {
-                const base64Image = reader.result.split(',')[1]; // فقط الجزء base64
-                // تجهيز البيانات للإرسال
-                const params = new URLSearchParams();
-                params.append('image', base64Image);
-                params.append('language', 'ara'); // لو عايز لغة معينة غيرها (مثلاً eng, fra...)
-                try {
-                    const response = await fetch('https://ocr-image-to-text-multilingual.p.rapidapi.com/imagetotext', {
-                        method: 'POST',
-                        headers: {
-                            'x-rapidapi-key': '32769fb369mshfdf6f5e28e26674p1f3764jsn2a31085a1fc7',
-                            'x-rapidapi-host': 'ocr-image-to-text-multilingual.p.rapidapi.com',
-                            'Content-Type': 'application/x-www-form-urlencoded'
-                        },
-                        body: params
-                    });
-                    const data = await response.json();
-                    // عرض النص الناتج
-                    if (data.text) {
-                        resultDiv.textContent = data.text;
-                    } else {
-                        resultDiv.textContent = "لم يتم التعرف على نص في الصورة.";
-                    }
-                } catch (error) {
-                    resultDiv.textContent = "حدث خطأ: " + error;
-                }
-            };
-            reader.readAsDataURL(file);
         });
     </script>
 </body>

 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
+    <title>تحليل صورة بالذكاء الاصطناعي</title>
     <style>
         body { font-family: Arial; margin: 40px; }
         label, button { display: block; margin-top: 15px; }
     </style>
 </head>
 <body>
+    <h2>تحليل صورة بالذكاء الاصطناعي</h2>
+    <form id="vision-form">
+        <label>رابط الصورة (أو ارفع صورة بالأسفل):
+            <input type="url" id="image-url" placeholder="https://example.com/image.jpg">
         </label>
+        <label>أو ارفع صورة:
+            <input type="file" id="image-input" accept="image/*">
+        </label>
+        <button type="submit">حلل الصورة</button>
     </form>
     <div id="result"></div>
     <script>
+        async function uploadToImgur(file) {
+            // رفع الصورة على Imgur للحصول على رابط مباشر
+            const formData = new FormData();
+            formData.append('image', file);
+            const res = await fetch('https://api.imgur.com/3/image', {
+                method: 'POST',
+                headers: { Authorization: 'Client-ID 54621f8d4e61e67' }, // استخدم ID مجاني من imgur.com
+                body: formData
+            });
+            const data = await res.json();
+            if (data.data && data.data.link) return data.data.link;
+            throw new Error("تعذر رفع الصورة");
+        }
+        document.getElementById('vision-form').addEventListener('submit', async function(event) {
             event.preventDefault();
             const resultDiv = document.getElementById('result');
+            resultDiv.textContent = "جاري التحليل...";
+            let imageUrl = document.getElementById('image-url').value.trim();
+            // لو مفيش رابط صورة والمستخدم رفع صورة من الجهاز
             const fileInput = document.getElementById('image-input');
+            if (!imageUrl && fileInput.files.length) {
+                try {
+                    imageUrl = await uploadToImgur(fileInput.files[0]);
+                } catch (err) {
+                    resultDiv.textContent = "خطأ في رفع الصورة: " + err.message;
+                    return;
+                }
+            }
+            if (!imageUrl) {
+                resultDiv.textContent = "من فضلك ضع رابط صورة أو ارفع صورة من جهازك.";
                 return;
             }
+            // تجهيز body بصيغة JSON
+            const body = JSON.stringify({
+                messages: [{
+                    role: "user",
+                    content: [
+                        { type: "text", text: "what's in the image" },
+                        { type: "image", url: imageUrl }
+                    ]
+                }],
+                web_access: false
+            });
+            try {
+                const response = await fetch('https://chatgpt-vision1.p.rapidapi.com/matagvision2', {
+                    method: 'POST',
+                    headers: {
+                        'x-rapidapi-key': '091dbfbf0emsh6606eb2165cfd97p191257jsnd017aa229e09',
+                        'x-rapidapi-host': 'chatgpt-vision1.p.rapidapi.com',
+                        'Content-Type': 'application/json'
+                    },
+                    body: body
+                });
+                const data = await response.json();
+                resultDiv.textContent = JSON.stringify(data, null, 2);
+            } catch (error) {
+                resultDiv.textContent = "حدث خطأ: " + error;
+            }
         });
     </script>
 </body>