Odak Projesi, bir görsel veya video üzerindeki insan dikkatini bilimsel metotlarla modelleyen ve analiz eden bir web uygulamasıdır. Tasarımcıların, pazarlama uzmanlarının ve araştırmacıların, oluşturdukları görsel materyallerin hangi bölgelerinin daha dikkat çekici olduğunu veriye dayalı olarak anlamalarını sağlar. Not: Proje kodları hazırlanırken Gemini 2.5 Pro'dan yararlanılmıştır.
- Analiz Modülleri ve Sonuçların Yorumlanması
- Sistemin Teknik Mimarisi ve İşleyişi
- Analizlerin Bilimsel Temelleri
- Kurulum ve Çalıştırma
- Kaynakça ve Referanslar
- Geri Bildirim ve Katkıda Bulunma
► Analizlerin detaylı yorum kılavuzunu görmek için buraya tıklayın (varsayılan olarak açık)
Uygulamanın sunduğu analizler ve bu sonuçların tasarımlarınızı iyileştirmek için nasıl yorumlanacağı aşağıda açıklanmıştır.
Analizin Amacı: Isı haritası, bir kullanıcının bir görsele ilk baktığında gözünün istemsizce nereye odaklanacağını gösteren bir haritadır. Kırmızı ve sarı "sıcak" bölgeler en çok dikkat çeken alanları, mavi ve yeşil "soğuk" bölgeler ise en az dikkat çeken alanları temsil eder.
Sonuçların Yorumlanması:
- Olumlu Göstergeler: Sıcak bölgelerin, logonuz, ana başlığınız, ürün görseliniz veya "Satın Al" gibi önemli bir buton üzerinde yoğunlaşması, tasarımınızın mesajını başarıyla ilettiğini gösterir. Web siteleri için, sıcak bölgelerin Nielsen Norman Group tarafından tanımlanan "F-Şeklinde Tarama Deseni" ile uyumlu olması (sayfanın sol üst ve orta kısımlarında yoğunlaşması) genellikle olumlu bir işarettir.
- İyileştirme Alanları: Sıcak bölgelerin alakasız bir stok fotoğraf, dekoratif bir element veya önemsiz bir metin üzerinde yoğunlaşması, kullanıcının dikkatinin dağıldığına ve ana mesajınızın gözden kaçtığına işarettir. Kritik elementlerin "soğuk" bölgelerde kalması, tasarım hiyerarşisinin gözden geçirilmesi gerektiğini belirtir.
Analizin Amacı: Bu simülasyon, bir kullanıcının gözünün görsel üzerindeki en dikkat çekici noktalar arasında hangi sırayla gezinebileceğini tahmin eder. Rota, en dikkat çekici noktadan (1) başlar ve azalan dikkat sırasına göre devam eder.
Sonuçların Yorumlanması:
- Olumlu Göstergeler: Rotanın mantıksal bir "görsel hikaye" anlatmasıdır. Örneğin, rota sırasıyla "1. Başlık -> 2. Ürün Görseli -> 3. Buton" gibi bir akışı takip ediyorsa, tasarımınızın yönlendirmesi başarılıdır.
- İyileştirme Alanları: Rotanın kaotik olması, önemli elementleri atlaması veya alakasız yerler arasında gidip gelmesi, tasarımınızda görsel bir hiyerarşi ve gruplama sorunu olduğunu gösterir.
Analizin Amacı: Algoritma, görselinizdeki "Satın Al", "İncele", "Başvur" gibi eyleme çağrı (CTA) butonlarını bulur ve bu butonların genel dikkat çekme potansiyelini 0-100 arasında puanlar.
Sonuçların Yorumlanması:
- Skor > 75 (Çok İyi): Butonunuz hem metin olarak nettir hem de görsel olarak çok baskındır. Kullanıcıların gözden kaçırma ihtimali çok düşüktür.
- Skor 50-74 (İyi): Butonunuz işlevsel ve bulunabilir ancak daha dikkat çekici hale getirilebilir. Rengini, boyutunu veya konumunu gözden geçirebilirsiniz.
- Skor < 50 (Zayıf): Butonunuz ya görsel olarak çok sönük kalıyor ya da metni bir eylem içermediği için algoritma tarafından zayıf bir aday olarak görülüyor.
Bu bölüm, uygulamanın arka planında çalışan teknolojileri ve veri akışını mühendislik bakış açısıyla detaylandırmaktadır.
| Kategori | Teknoloji |
|---|---|
| Backend Framework | Python 3.10, Flask |
| Görüntü İşleme | OpenCV-Python 4.x |
| Optik Karakter Tanıma (OCR) | Pytesseract |
| Veri Görselleştirme | Matplotlib |
| Frontend | HTML5, CSS3, JavaScript |
| Konteynerizasyon | Docker, Docker Compose |
Uygulama, stabil ve güvenli bir kullanıcı deneyimi için Post-Redirect-Get (PRG) mimari desenini kullanır.
- Dosya Yükleme (POST): Kullanıcı bir dosya yüklediğinde,
multipart/form-dataolarak ilgili/upload_...endpoint'ine gönderilir. Flask,werkzeug.utils.secure_filenameile dosya adını sanitize eder ve dosyayı geçici olarak/static/uploadsdizinine yazar. - Analiz Süreci Tetikleme:
- Video için:
process_videofonksiyonu, videoyucv2.VideoCaptureile okur. Belirli saniye aralıklarıyla (SAMPLING_INTERVAL_SECONDS) kareler arasındacv2.absdiffile mutlak fark hesaplar. Bu farkın belirli bir eşik (CHANGE_THRESHOLD) değerini geçmesi, o anki karenin "Anahtar Kare" olarak kabul edilmesini sağlar. - Görsel için:
perform_analysisfonksiyonu doğrudan çağrılır.
- Video için:
- Çekirdek Analiz (perform_analysis): Her bir resim (veya anahtar kare), bu merkezi fonksiyon içinde sırasıyla
generate_heatmap,generate_focus_map,generate_gaze_plotvescore_button_candidatesalt fonksiyonlarından geçirilir. Her bir fonksiyonun çıktısı (görsel dosyalar),/static/outputsdizinine yazılır. - Veri Kalıcılığı ve Yönlendirme: Tüm analiz sonuçları bir Python sözlüğünde toplanır ve Flask'in
sessionobjesinde saklanır. Ardından, sunucuredirect(url_for('...'))ile kullanıcıyı sonuçların gösterileceği yeni bir URL'e yönlendirir. - Sonuçların Gösterimi (GET): Kullanıcının tarayıcısı bu yeni URL'e standart bir
GETisteği yapar. İlgili Flask rotası,session'dan sonuç verilerini çeker verender_templateile HTML sayfasını dinamik olarak oluşturarak kullanıcıya sunar.
- Isı Haritası (Saliency): Bu modül, insan görsel sisteminin "aşağıdan yukarıya dikkat" (bottom-up attention) mekanizmasını modeller. Temelleri, Itti, Koch ve Niebur (1998) tarafından geliştirilen "Saliency-Based Visual Attention" modeline dayanır.
- Bakış Rotası (Gaze Plot): İnsan gözünün "sakkad" (hızlı sıçramalar) ve "fiksasyon" (kısa duraklamalar) hareketlerini simüle eder.
- CTA Tespiti: Tasarımcı Don Norman'ın "Olanaklılık" (Affordance) kavramına dayanır. Bir elementin tasarımı, onun nasıl kullanılacağını ima etmelidir.
Projeyi çalıştırmak için sisteminizde Git, Docker ve Docker Compose kurulu olmalıdır.
- Projeyi Klonlayın:
git clone [https://github.com/AhmetKorkmazMe/odak-projesi.git](https://github.com/AhmetKorkmazMe/odak-projesi.git)
- Proje Dizinine Gidin:
cd odak-projesi - Uygulamayı Başlatın:
docker-compose up -d
- Erişim:
Kurulum tamamlandıktan sonra, web uygulamasına
http://localhostveyahttp://sunucu_ip_adresinizadresi üzerinden erişebilirsiniz.
- Itti, L., Koch, C., & Niebur, E. (1998). A model of saliency-based visual attention for rapid scene analysis. IEEE Transactions on Pattern Analysis and Machine Intelligence.
- Hou, X., & Zhang, L. (2007). Saliency detection: A spectral residual approach. IEEE Conference on Computer Vision and Pattern Recognition (CVPR).
- Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. Nielsen Norman Group.
- Norman, D. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.
- Google Tesseract OCR Engine & OpenCV Library.
Proje ile ilgili bir hata bulursanız, bir öneriniz varsa veya bir soru sormak isterseniz, lütfen Issues sekmesini kullanmaktan çekinmeyin. Tüm geri bildirimler değerlidir.
► Click here for the English Version
The Odak Project is a web application that models and analyzes human visual attention on an image or video using scientific methods. It enables designers, marketing experts, and researchers to understand, based on data, which parts of their visual materials are more engaging.Note: Gemini 2.5 Pro was also used while preparing the project codes.
The analyses provided by the application and how to interpret these results to improve your designs are explained below.
Purpose: A heatmap is a map that shows where a user's eye will involuntarily focus when they first look at an image. "Hot" regions in red and yellow represent the most attention-grabbing areas, while "cold" regions in blue and green represent the least.
Interpretation:
- Positive Indicators: If hot zones are concentrated on your logo, main headline, product image, or a key button like "Buy Now," it indicates that your design successfully conveys its message.
- Areas for Improvement: If hot zones are focused on an irrelevant stock photo or a decorative element, it's a sign that the user's attention is distracted. If critical elements remain in "cold" zones, the design hierarchy should be reconsidered.
Purpose: This simulation predicts the sequence in which a user's eye might scan across the most salient points on a visual. The route starts from the most attention-grabbing point (1) and proceeds in descending order of attention.
Interpretation:
- Positive Indicators: The route tells a logical "visual story." For instance, if the path follows a flow like "1. Headline -> 2. Product Image -> 3. Button," your design's guidance is successful.
- Areas for Improvement: A chaotic path that skips important elements suggests a problem with visual hierarchy and grouping in your design.
Purpose: The algorithm finds call-to-action (CTA) buttons like "Buy," "Learn More," or "Apply" in your visual and scores their attention-grabbing potential on a scale of 0-100.
Interpretation:
- Score > 75 (Very Good): Your button is clear both textually and visually dominant.
- Score 50-74 (Good): Your button is functional but could be made more prominent.
- Score < 50 (Weak): Your button is either visually subdued or its text doesn't imply an action, making it difficult for users to notice.
This section details the technologies and data flow that power the application from an engineering perspective.
- Backend Framework: Python 3.10, Flask
- Image Processing: OpenCV-Python 4.x
- Optical Character Recognition (OCR): Pytesseract
- Data Visualization: Matplotlib
- Frontend: HTML5, CSS3, JavaScript
- Containerization: Docker, Docker Compose
The application uses the Post-Redirect-Get (PRG) design pattern for a stable and secure user experience.
-
File Upload (POST): When a user uploads a file, it is sent as
multipart/form-datato the relevant/upload_...endpoint. Flask sanitizes the filename usingwerkzeug.utils.secure_filenameand temporarily writes the file to the/static/uploadsdirectory. -
Triggering the Analysis Process:
- For Videos: The
process_videofunction reads the video usingcv2.VideoCapture. It calculates the absolute difference (cv2.absdiff) between frames at specific intervals (SAMPLING_INTERVAL_SECONDS). If this difference exceeds a certain threshold (CHANGE_THRESHOLD), the current frame is considered a "Key Frame". - For Images: The
perform_analysisfunction is called directly.
- For Videos: The
-
Core Analysis (perform_analysis): Each image (or key frame) is passed through the
generate_heatmap,generate_focus_map,generate_gaze_plot, andscore_button_candidatessub-functions within this central function. The output of each function (image files) is written to the/static/outputsdirectory. -
Data Persistence and Redirection: All analysis results are collected in a Python dictionary and stored in Flask's
sessionobject. The server then redirects the user to a new URL for displaying the results usingredirect(url_for('...')). -
Displaying Results (GET): The user's browser makes a standard
GETrequest to this new URL. The corresponding Flask route retrieves the result data from thesessionand dynamically renders the HTML page usingrender_template.
The analysis modules are based on academic principles in computer vision and cognitive psychology.
- Heatmap (Saliency): This module models the "bottom-up attention" mechanism of the human visual system, based on the foundational "Saliency-Based Visual Attention" model by Itti, Koch, and Niebur (1998).
- Gaze Plot: It simulates the "saccade" (rapid jumps) and "fixation" (short pauses) movements of the human eye by identifying high-density areas in the saliency map.
- CTA Detection: It is based on Don Norman's concept of "Affordance." The design of an element should imply how it is to be used (e.g., that it is "clickable"). The algorithm identifies this affordance by combining semantic content, visual distinctiveness, and geometric form.
You must have Git, Docker, and Docker Compose installed to run the project.
- Clone the Repository:
git clone [https://github.com/AhmetKorkmazMe/odak-projesi.git](https://github.com/AhmetKorkmazMe/odak-projesi.git)
- Navigate to the Project Directory:
cd odak-projesi - Launch the Application:
docker-compose up -d
- Access:
Once complete, access the web application at
http://localhostorhttp://your_server_ip_address.
The algorithms and methodologies used in this project are based on the following foundational scientific works and technologies.
- Itti, L., Koch, C., & Niebur, E. (1998). A model of saliency-based visual attention for rapid scene analysis. IEEE Transactions on Pattern Analysis and Machine Intelligence.
- Hou, X., & Zhang, L. (2007). Saliency detection: A spectral residual approach. IEEE Conference on Computer Vision and Pattern Recognition (CVPR).
- Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. Nielsen Norman Group.
- Norman, D. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.
- Google Tesseract OCR Engine & OpenCV Library.
If you find a bug, have a suggestion, or want to ask a question about the project, please feel free to use the Issues tab. All feedback is valuable.