{"id":8288,"date":"2024-08-22T14:50:00","date_gmt":"2024-08-22T11:50:00","guid":{"rendered":"https:\/\/digitalrise.art\/?page_id=8288"},"modified":"2024-08-22T23:50:26","modified_gmt":"2024-08-22T20:50:26","slug":"%d7%95%d7%99%d7%93%d7%90%d7%95-2","status":"publish","type":"page","link":"https:\/\/digitalrise.art\/?page_id=8288","title":{"rendered":"\u05d5\u05d9\u05d3\u05d0\u05d5 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8288\" class=\"elementor elementor-8288\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc28dff e-con-full e-flex e-con e-parent\" data-id=\"dc28dff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1094407 elementor-widget elementor-widget-html\" data-id=\"1094407\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"he\" dir=\"rtl\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u05de\u05e2\u05e8\u05db\u05ea \u05e8\u05d0\u05d9\u05d9\u05d4 \u05de\u05de\u05d5\u05d7\u05e9\u05d1\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05ea \u05d5\u05d0\u05d9\u05e0\u05d8\u05e8\u05d0\u05e7\u05e6\u05d9\u05d4 \u05d7\u05db\u05de\u05d4<\/title>\r\n    <style>\r\n        body {\r\n            font-family: Arial, sans-serif;\r\n            text-align: center;\r\n            margin: 0;\r\n            padding: 20px;\r\n            background-color: #f4f4f4;\r\n        }\r\n\r\n        #camera-container {\r\n            position: relative;\r\n            margin: auto;\r\n            width: 640px;\r\n            height: 480px;\r\n        }\r\n\r\n        video {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            border: 2px solid #333;\r\n        }\r\n\r\n        #canvas {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n\r\n        #controls {\r\n            margin-top: 20px;\r\n            position: relative;\r\n            z-index: 10;\r\n        }\r\n\r\n        #results {\r\n            margin-top: 20px;\r\n            text-align: left;\r\n            max-width: 640px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n\r\n        #vision-results, #ocr-results, #response {\r\n            margin-top: 10px;\r\n            font-size: 1em;\r\n        }\r\n\r\n        button {\r\n            padding: 10px 20px;\r\n            margin: 5px;\r\n            font-size: 16px;\r\n            cursor: pointer;\r\n            border: none;\r\n            border-radius: 5px;\r\n            background-color: #007BFF;\r\n            color: white;\r\n        }\r\n\r\n        button:hover {\r\n            background-color: #0056b3;\r\n        }\r\n\r\n        button:disabled {\r\n            background-color: #ccc;\r\n            cursor: not-allowed;\r\n        }\r\n    <\/style>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/coco-ssd\"><\/script>\r\n<\/head>\r\n\r\n<body>\r\n    <h1>\u05de\u05e2\u05e8\u05db\u05ea \u05e8\u05d0\u05d9\u05d9\u05d4 \u05de\u05de\u05d5\u05d7\u05e9\u05d1\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05ea \u05d5\u05d0\u05d9\u05e0\u05d8\u05e8\u05d0\u05e7\u05e6\u05d9\u05d4 \u05d7\u05db\u05de\u05d4<\/h1>\r\n    <div id=\"camera-container\">\r\n        <video id=\"camera\" autoplay><\/video>\r\n        <canvas id=\"canvas\"><\/canvas>\r\n    <\/div>\r\n    <div id=\"controls\">\r\n        <button id=\"toggle-camera\">\u05d4\u05e4\u05e2\u05dc \u05de\u05e6\u05dc\u05de\u05d4<\/button>\r\n        <button id=\"start-conversation\" disabled>\u05d4\u05ea\u05d7\u05dc \u05e9\u05d9\u05d7\u05d4 \u05e8\u05e6\u05d9\u05e4\u05d4<\/button>\r\n        <button id=\"end-conversation\" disabled>\u05e1\u05d9\u05d9\u05dd \u05e9\u05d9\u05d7\u05d4<\/button>\r\n        <button id=\"analyze-scene\" disabled>\u05e0\u05ea\u05d7 \u05d0\u05ea \u05d4\u05e1\u05e6\u05e0\u05d4<\/button>\r\n    <\/div>\r\n    <div id=\"results\">\r\n        <div id=\"vision-results\"><\/div>\r\n        <div id=\"ocr-results\"><\/div>\r\n        <div id=\"response\"><\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ API keys and endpoints\r\n        const COMPUTER_VISION_KEY = '0f26015680674c3e8b8e030c34699ade';\r\n        const COMPUTER_VISION_ENDPOINT = 'https:\/\/vision-bot.cognitiveservices.azure.com\/';\r\n        const OPENAI_API_KEY = 'sk-proj-iXZbjMGloZDiEfkcHYHpT3BlbkFJySoARrRKBGbzpf5eXtgf';\r\n        const OPENAI_API_URL = 'https:\/\/api.openai.com\/v1\/chat\/completions';\r\n\r\n        let isCameraOpen = false;\r\n        let mediaStream = null;\r\n        let recognition;\r\n        let isContinuousConversationActive = false;\r\n        let canvas, ctx;\r\n        let lastApiCallTime = 0;\r\n        const apiCallDelay = 2000; \/\/ 2 seconds delay between API calls\r\n        let cocoSsdModel;\r\n\r\n        \/\/ Initialize COCO-SSD model\r\n        async function initModel() {\r\n            try {\r\n                cocoSsdModel = await cocoSsd.load();\r\n                console.log('COCO-SSD model loaded successfully');\r\n            } catch (error) {\r\n                console.error('Error loading COCO-SSD model:', error);\r\n            }\r\n        }\r\n\r\n        \/\/ Toggle Camera\r\n        document.getElementById('toggle-camera').addEventListener('click', async function () {\r\n            const cameraContainer = document.getElementById('camera-container');\r\n            const videoElement = document.getElementById('camera');\r\n\r\n            if (!isCameraOpen) {\r\n                try {\r\n                    mediaStream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } });\r\n                    videoElement.srcObject = mediaStream;\r\n                    await videoElement.play();\r\n                    this.textContent = '\u05db\u05d1\u05d4 \u05de\u05e6\u05dc\u05de\u05d4';\r\n                    document.getElementById('start-conversation').disabled = false;\r\n                    document.getElementById('analyze-scene').disabled = false;\r\n                    canvas = document.getElementById('canvas');\r\n                    ctx = canvas.getContext('2d');\r\n                    canvas.width = videoElement.videoWidth;\r\n                    canvas.height = videoElement.videoHeight;\r\n                    await initModel();\r\n                } catch (error) {\r\n                    console.error('Error accessing the camera:', error);\r\n                    alert('\u05d4\u05de\u05e6\u05dc\u05de\u05d4 \u05dc\u05d0 \u05e0\u05de\u05e6\u05d0\u05d4 \u05d0\u05d5 \u05d4\u05d2\u05d9\u05e9\u05d4 \u05e0\u05d3\u05d7\u05ea\u05d4. \u05d0\u05e0\u05d0 \u05d1\u05d3\u05d5\u05e7 \u05d0\u05ea \u05d4\u05d4\u05d2\u05d3\u05e8\u05d5\u05ea \u05e9\u05dc\u05da.');\r\n                }\r\n            } else {\r\n                if (mediaStream) {\r\n                    const tracks = mediaStream.getTracks();\r\n                    tracks.forEach(track => track.stop());\r\n                    videoElement.srcObject = null;\r\n                }\r\n                this.textContent = '\u05d4\u05e4\u05e2\u05dc \u05de\u05e6\u05dc\u05de\u05d4';\r\n                document.getElementById('start-conversation').disabled = true;\r\n                document.getElementById('end-conversation').disabled = true;\r\n                document.getElementById('analyze-scene').disabled = true;\r\n            }\r\n            isCameraOpen = !isCameraOpen;\r\n        });\r\n\r\n        \/\/ Analyze scene\r\n        document.getElementById('analyze-scene').addEventListener('click', async function () {\r\n            if (isCameraOpen) {\r\n                try {\r\n                    const imageBlob = await captureImage();\r\n                    const objects = await detectObjects();\r\n                    const ocrResult = await performOCR(imageBlob);\r\n                    const sceneDescription = await describeScene(objects, ocrResult);\r\n                    document.getElementById('vision-results').innerHTML = `<strong>\u05ea\u05d9\u05d0\u05d5\u05e8 \u05d4\u05e1\u05e6\u05e0\u05d4:<\/strong><br>${sceneDescription}`;\r\n                    speak(sceneDescription);\r\n                } catch (error) {\r\n                    console.error('Error analyzing scene:', error);\r\n                    document.getElementById('vision-results').textContent = '\u05e9\u05d2\u05d9\u05d0\u05d4 \u05d1\u05e0\u05d9\u05ea\u05d5\u05d7 \u05d4\u05e1\u05e6\u05e0\u05d4';\r\n                }\r\n            }\r\n        });\r\n\r\n        async function captureImage() {\r\n            const video = document.getElementById('camera');\r\n            canvas.width = video.videoWidth;\r\n            canvas.height = video.videoHeight;\r\n            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\r\n            return new Promise(resolve => canvas.toBlob(resolve, 'image\/jpeg'));\r\n        }\r\n\r\n        async function detectObjects() {\r\n            const video = document.getElementById('camera');\r\n            const predictions = await cocoSsdModel.detect(video);\r\n            return predictions.map(pred => pred.class);\r\n        }\r\n\r\n        async function performOCR(imageBlob) {\r\n            const response = await fetch(`${COMPUTER_VISION_ENDPOINT}vision\/v3.2\/ocr`, {\r\n                method: 'POST',\r\n                headers: {\r\n                    'Ocp-Apim-Subscription-Key': COMPUTER_VISION_KEY,\r\n                    'Content-Type': 'application\/octet-stream'\r\n                },\r\n                body: imageBlob\r\n            });\r\n\r\n            if (!response.ok) {\r\n                throw new Error(`HTTP error! status: ${response.status}`);\r\n            }\r\n\r\n            const result = await response.json();\r\n            return result.regions\r\n                .flatMap(region => region.lines)\r\n                .flatMap(line => line.words)\r\n                .map(word => word.text)\r\n                .join(' ');\r\n        }\r\n\r\n        async function describeScene(objects, ocrText) {\r\n            const currentTime = new Date().getTime();\r\n            if (currentTime - lastApiCallTime < apiCallDelay) {\r\n                await new Promise(resolve => setTimeout(resolve, apiCallDelay - (currentTime - lastApiCallTime)));\r\n            }\r\n            lastApiCallTime = currentTime;\r\n\r\n            const response = await fetch(OPENAI_API_URL, {\r\n                method: 'POST',\r\n                headers: {\r\n                    'Content-Type': 'application\/json',\r\n                    'Authorization': `Bearer ${OPENAI_API_KEY}`\r\n                },\r\n                body: JSON.stringify({\r\n                    model: \"gpt-4\",\r\n                    messages: [{\r\n                        role: \"system\",\r\n                        content: \"You are a helpful assistant that can see and understand the environment through a camera. Describe the scene based on the objects detected and any text recognized. If there are math problems or exercises in the text, solve them. Respond in Hebrew.\"\r\n                    }, {\r\n                        role: \"user\",\r\n                        content: `Objects detected: ${objects.join(', ')}. Text recognized: ${ocrText}. Please describe the scene, including any relevant information about the objects and text. If there are any math problems or exercises, please solve them.`\r\n                    }]\r\n                })\r\n            });\r\n\r\n            if (!response.ok) {\r\n                throw new Error(`HTTP error! status: ${response.status}`);\r\n            }\r\n\r\n            const result = await response.json();\r\n            return result.choices[0].message.content;\r\n        }\r\n\r\n        \/\/ Start Continuous Conversation\r\n        document.getElementById('start-conversation').addEventListener('click', function () {\r\n            if (isContinuousConversationActive) {\r\n                stopContinuousConversation();\r\n                this.textContent = '\u05d4\u05ea\u05d7\u05dc \u05e9\u05d9\u05d7\u05d4 \u05e8\u05e6\u05d9\u05e4\u05d4';\r\n            } else {\r\n                startContinuousConversation();\r\n                this.textContent = '\u05d4\u05e4\u05e1\u05e7 \u05e9\u05d9\u05d7\u05d4 \u05e8\u05e6\u05d9\u05e4\u05d4';\r\n            }\r\n        });\r\n\r\n        document.getElementById('end-conversation').addEventListener('click', function () {\r\n            stopContinuousConversation();\r\n            document.getElementById('start-conversation').textContent = '\u05d4\u05ea\u05d7\u05dc \u05e9\u05d9\u05d7\u05d4 \u05e8\u05e6\u05d9\u05e4\u05d4';\r\n        });\r\n\r\n        function startContinuousConversation() {\r\n            isContinuousConversationActive = true;\r\n            recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();\r\n            recognition.continuous = true;\r\n            recognition.interimResults = false;\r\n            recognition.lang = 'he-IL'; \/\/ Set to Hebrew\r\n\r\n            recognition.onresult = async (event) => {\r\n                const speech = event.results[event.results.length - 1][0].transcript.trim();\r\n                if (speech) {\r\n                    await processSpeech(speech);\r\n                }\r\n            };\r\n\r\n            recognition.onend = () => {\r\n                if (isContinuousConversationActive) {\r\n                    recognition.start();\r\n                }\r\n            };\r\n\r\n            recognition.start();\r\n            document.getElementById('end-conversation').disabled = false;\r\n        }\r\n\r\n        function stopContinuousConversation() {\r\n            if (recognition) {\r\n                recognition.stop();\r\n            }\r\n            isContinuousConversationActive = false;\r\n            document.getElementById('end-conversation').disabled = true;\r\n            window.speechSynthesis.cancel(); \/\/ Stop any ongoing speech\r\n        }\r\n\r\n        async function processSpeech(speech) {\r\n            document.getElementById('response').innerHTML = `<strong>\u05d0\u05de\u05e8\u05ea:<\/strong> ${speech}`;\r\n\r\n            try {\r\n                const objects = await detectObjects();\r\n                const imageBlob = await captureImage();\r\n                const ocrText = await performOCR(imageBlob);\r\n                \r\n                const currentTime = new Date().getTime();\r\n                if (currentTime - lastApiCallTime < apiCallDelay) {\r\n                    await new Promise(resolve => setTimeout(resolve, apiCallDelay - (currentTime - lastApiCallTime)));\r\n                }\r\n                lastApiCallTime = currentTime;\r\n\r\n                const response = await fetch(OPENAI_API_URL, {\r\n                    method: 'POST',\r\n                    headers: {\r\n                        'Content-Type': 'application\/json',\r\n                        'Authorization': `Bearer ${OPENAI_API_KEY}`\r\n                    },\r\n                    body: JSON.stringify({\r\n                        model: \"gpt-4\",\r\n                        messages: [{\r\n                            role: \"system\",\r\n                            content: \"You are a helpful assistant that can see and understand the environment through a camera. Respond to the user's question or comment based on the objects detected and any text recognized. If there are math problems or exercises in the text, solve them. Respond in Hebrew.\"\r\n                        }, {\r\n                            role: \"user\",\r\n                            content: `Objects detected: ${objects.join(', ')}. Text recognized: ${ocrText}. User's question or comment: ${speech}. Please respond accordingly, addressing the user's input and the visual information available.`\r\n                        }]\r\n                    })\r\n                });\r\n\r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status}`);\r\n                }\r\n\r\n                const result = await response.json();\r\n                const reply = result.choices[0].message.content;\r\n\r\n                document.getElementById('response').innerHTML += `<br><strong>\u05ea\u05e9\u05d5\u05d1\u05ea \u05d4\u05d1\u05d5\u05d8:<\/strong> ${reply}`;\r\n                speak(reply);\r\n            } catch (error) {\r\n                console.error('Error processing speech:', error);\r\n                document.getElementById('response').innerHTML += '<br>\u05e9\u05d2\u05d9\u05d0\u05d4 \u05d1\u05e2\u05d9\u05d1\u05d5\u05d3 \u05d4\u05d3\u05d9\u05d1\u05d5\u05e8. \u05d0\u05e0\u05d0 \u05e0\u05e1\u05d4 \u05e9\u05d5\u05d1.';\r\n            }\r\n        }\r\n\r\n        function speak(text) {\r\n            const synth = window.speechSynthesis;\r\n            const utterance = new SpeechSynthesisUtterance(text);\r\n            utterance.lang = 'he-IL'; \/\/ Set language to Hebrew\r\n            synth.speak(utterance);\r\n        }\r\n\r\n        \/\/ Initialize the application\r\n        initModel().catch(console.error);\r\n    <\/script>\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u05de\u05e2\u05e8\u05db\u05ea \u05e8\u05d0\u05d9\u05d9\u05d4 \u05de\u05de\u05d5\u05d7\u05e9\u05d1\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05ea \u05d5\u05d0\u05d9\u05e0\u05d8\u05e8\u05d0\u05e7\u05e6\u05d9\u05d4 \u05d7\u05db\u05de\u05d4 \u05de\u05e2\u05e8\u05db\u05ea \u05e8\u05d0\u05d9\u05d9\u05d4 \u05de\u05de\u05d5\u05d7\u05e9\u05d1\u05ea \u05de\u05ea\u05e7\u05d3\u05de\u05ea \u05d5\u05d0\u05d9\u05e0\u05d8\u05e8\u05d0\u05e7\u05e6\u05d9\u05d4 \u05d7\u05db\u05de\u05d4 \u05d4\u05e4\u05e2\u05dc \u05de\u05e6\u05dc\u05de\u05d4 \u05d4\u05ea\u05d7\u05dc \u05e9\u05d9\u05d7\u05d4 \u05e8\u05e6\u05d9\u05e4\u05d4 \u05e1\u05d9\u05d9\u05dd \u05e9\u05d9\u05d7\u05d4 \u05e0\u05ea\u05d7 \u05d0\u05ea \u05d4\u05e1\u05e6\u05e0\u05d4<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8288","page","type-page","status-publish","hentry"],"ams_acf":[],"_links":{"self":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/8288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8288"}],"version-history":[{"count":76,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/8288\/revisions"}],"predecessor-version":[{"id":8366,"href":"https:\/\/digitalrise.art\/index.php?rest_route=\/wp\/v2\/pages\/8288\/revisions\/8366"}],"wp:attachment":[{"href":"https:\/\/digitalrise.art\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}