Rebuild project without binary files

A_Star.py

@@ -1,39 +0,0 @@
-from heapq import *
-
-# A* algoritmasında kullanılacak olan heuristik fonksiyon
-def heuristic(a, b):
-    return abs(a[0] - b[0]) + abs(a[1] - b[1])  # A ile B arasındaki Manhattan mesafesi
-
-# Yolu geri döndürmek için kullanılan fonksiyon
-def reconstruct_path(came_from, current):
-    total_path = [current]
-    while current in came_from and came_from[current] is not None:
-        current = came_from[current]
-        total_path.append(current)  # Yolun parçalarını sırayla ekle
-    return total_path[::-1]  # Yolu ters çevir, böylece başlangıç -> hedef sırası olur
-
-def a_star(graph, start, goal):
-    queue = []
-    heappush(queue, (0, start))  # Başlangıç düğümünü maliyet 0 ile kuyruğa ekle
-    g_score = {start: 0}  # Başlangıç düğümünün maliyeti 0
-    came_from = {start: None}  # Her düğümün nereden geldiğini takip etmek için
-
-    while queue:
-        _, current = heappop(queue)  # En düşük maliyetli düğümü al
-
-        if current == goal:
-            return reconstruct_path(came_from, goal)  # Hedefe ulaşıldıysa yolu geri döndür
-
-        # Mevcut düğümün komşularını dolaş
-        for neighbor_cost, neighbor in graph[current]:
-            tentative_g_score = g_score[current] + neighbor_cost  # Komşuya ulaşmanın maliyetini hesapla
-
-            # Daha düşük maliyet bulunursa güncelle
-            if neighbor not in g_score or tentative_g_score < g_score[neighbor]:
-                g_score[neighbor] = tentative_g_score  # En iyi g_score güncelle
-                f_score = tentative_g_score + heuristic(neighbor, goal)  # Toplam maliyeti hesapla (g + h)
-                heappush(queue, (f_score, neighbor))  # Komşuyu öncelik sırasına ekle
-                came_from[neighbor] = current  # Bu komşuya, mevcut düğümden gelindi
-
-    return None  # Eğer hedefe ulaşılamazsa None döndür
-

Bellman_Ford.py

@@ -1,44 +0,0 @@
-# kaynak: https://www.youtube.com/watch?v=24HziTZ8_xo
-
-def bellman_ford(graph,başlangıç,hedef):
-   # Mesafeleri sonsuz olarak başlat
-   mesafeler = {node: float('infinity') for node in graph}
-   önceki = {node: None for node in graph}  # Her düğümün öncesini kaydet
-
-   # Başlangıç düğümünün mesafesini sıfır olarak ayarla
-   mesafeler[başlangıç] = 0
-
-   # Döngü graftaki düğümlerin sayısının 1 eksiği kadar devam etmeli.
-   for _ in range(len(graph) - 1):  # Düğüm sayısı - 1 kadar tekrar et
-       for i in graph:  # Her düğüm üzerinde dolaş
-           for j in graph[i]:  # Düğümün komşularına bak
-               hedef_dugum = j[1]  # Hedef düğümü al
-               maliyet = j[0]  # Kenar maliyetini al
-
-               # Eğer mevcut düğümün mesafesi sonsuz değilse ve komşuya olan mesafe daha düşükse güncelle
-               if mesafeler[i] != float('infinity') and (mesafeler[i] + maliyet < mesafeler[hedef_dugum]):
-                   mesafeler[hedef_dugum] = mesafeler[i] + maliyet
-                   önceki[hedef_dugum] = i  # Önceki düğümü güncelle
-
-   # Negatif ağırlıklı döngü kontrolü
-   for i in graph:
-       for j in graph[i]:
-           hedef_dugum = j[1]
-           maliyet = j[0]
-
-           # Eğer hala bir iyileştirme yapılabiliyorsa negatif döngü vardır
-           if mesafeler[i] != float('infinity') and (mesafeler[i] + maliyet < mesafeler[hedef_dugum]):
-               return None  # Negatif döngü bulunduktan sonra işlevi sonlandırın.
-
-
-   # En kısa yolu bulmak için hedeften başlangıca doğru git
-   yol = []
-   geçerli_dugum = hedef
-
-   while geçerli_dugum is not None:
-       yol.append(geçerli_dugum)
-       geçerli_dugum = önceki[geçerli_dugum]
-
-   # Yolu ters çevir ve döndür.
-   yol.reverse()
-   return yol

Dijkstra.py

@@ -1,49 +0,0 @@
-def get_shortest_path(previous_nodes, start, target):
-    path = []
-    current_node = target
-    
-    while current_node is not None:
-        path.insert(0, current_node)  # Düğümü başa ekle
-        current_node = previous_nodes[current_node]  # Bir önceki düğüme git
-    
-    if path[0] == start:
-        return path
-    else:
-        return []  # Eğer yol yoksa boş liste döner
-
-def dijkstra(graph, start,target):
-    # 1. Mesafe tablosu: Başlangıç düğümünden diğer düğümlere olan mesafeleri tutar
-    mesafeler = {node: float('infinity') for node in graph}
-    mesafeler[start] = 0
-
-    # 2. Ziyaret edilen düğümleri tutan liste
-    ziyaret_edilen = []
-
-    # 3. Önceki düğümleri tutan tablo: En kısa yolu oluşturmak için
-    önceki_düğümler = {node: None for node in graph}
-
-    while len(ziyaret_edilen) < len(graph):
-        # 4. Ziyaret edilmemiş düğümler arasında en kısa mesafeye sahip olanı seç
-        en_kısa_yol_düğümü = None
-        for node in mesafeler:
-            if node not in ziyaret_edilen:
-                if en_kısa_yol_düğümü is None:
-                    en_kısa_yol_düğümü = node
-                elif mesafeler[node] < mesafeler[en_kısa_yol_düğümü]:
-                    en_kısa_yol_düğümü = node
-        
-        if en_kısa_yol_düğümü is None:
-            break  # Tüm düğümler ziyaret edilmişse ya da ulaşılamayan düğümler kalmışsa döngüyü sonlandır
-
-        # 5. Seçilen düğümün komşularının mesafelerini güncelle
-        for ağırlık,komşu in graph[en_kısa_yol_düğümü]:
-
-            yeni_mesafe = mesafeler[en_kısa_yol_düğümü] + ağırlık
-            if yeni_mesafe < mesafeler[komşu]:
-                mesafeler[komşu] = yeni_mesafe
-                önceki_düğümler[komşu] = en_kısa_yol_düğümü
-
-        # 6. Seçilen düğümü ziyaret edilmiş olarak işaretle
-        ziyaret_edilen.append(en_kısa_yol_düğümü)
-
-    return get_shortest_path(önceki_düğümler, start, target)

HUGGINGFACE_YUKLE.txt

@@ -0,0 +1,28 @@
+🚀 HUGGING FACE SPACES'E YÜKLEME
+
+Bu klasördeki TÜM dosya ve klasörleri Hugging Face'e yükleyin.
+
+📁 YÜKLENECEK DOSYALAR:
+
+├── app.py
+├── Dockerfile  
+├── README.md
+├── requirements.txt
+├── static/
+│   └── images/
+│       └── map.jpg
+└── templates/
+    └── index.html
+
+🎯 ADIMLAR:
+
+1. https://huggingface.co/new-space
+2. SDK: DOCKER seçin
+3. Tüm dosyaları yükleyin
+4. Build bekleyin (5-10 dakika)
+5. Hazır!
+
+✅ KONTROL:
+- Sayfa açılır açılmaz resim üzerinde path göreceksiniz
+- Algoritma seçebileceksiniz
+- Slider ile start/goal ayarlayabileceksiniz

README.md

@@ -1,12 +1,29 @@
 ---
-title: Pathfinding Algorithms
-emoji: ⚡
-colorFrom: yellow
-colorTo: red
+title: Path Finding Algorithms
+emoji: 🗺️
+colorFrom: blue
+colorTo: green
 sdk: docker
+app_port: 7860
 pinned: false
 license: mit
-short_description: '``` Interactive pathfinding algorithm visualizer with A*, Di'
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🗺️ Path Finding Algorithms Visualizer
+
+Interactive pathfinding visualization with **A\***, **Dijkstra**, and **Bellman-Ford** algorithms on a custom map.
+
+## 🚀 How to Use
+
+1. **Select Algorithm**: A*, Dijkstra, or Bellman-Ford
+2. **Set Start Position**: X and Y sliders
+3. **Set Goal Position**: X and Y sliders  
+4. **Find Path**: Click button to visualize
+
+## 📊 Algorithms
+
+- **A\***: Fastest with heuristic
+- **Dijkstra**: Classic shortest path
+- **Bellman-Ford**: Handles negative weights
+
+Built with Python, Flask, and Matplotlib

app.py

@@ -1,17 +1,19 @@
-import gradio as gr
+from flask import Flask, render_template, request, jsonify, send_file
 import numpy as np
 import matplotlib
-matplotlib.use('Agg')  # Non-interactive backend for server
+matplotlib.use('Agg')
 import matplotlib.pyplot as plt
 from matplotlib.patches import Rectangle
 from heapq import heappush, heappop
 import io
 from PIL import Image
 import os
+import base64
 
-# Matplotlib config directory
 os.environ['MPLCONFIGDIR'] = '/tmp/matplotlib'
 
+app = Flask(__name__)
+
 # Grid tanımı
 GRID = [[4, 4, 4, 4, 4, 4, 4, 2, 3, 2, 4, 2], 
         [4, 4, 4, 4, 9, 9, 3, 2, 2, 4, 4, 4], 
@@ -24,7 +26,6 @@ GRID = [[4, 4, 4, 4, 4, 4, 4, 2, 3, 2, 4, 2],
 
 COLS, ROWS = 12, 8
 
-# Graph oluştur
 def create_graph(grid):
     graph = {}
     for y in range(len(grid)):
@@ -39,7 +40,6 @@ def create_graph(grid):
 
 GRAPH = create_graph(GRID)
 
-# A* Algoritması
 def heuristic(a, b):
     return abs(a[0] - b[0]) + abs(a[1] - b[1])
 
@@ -70,7 +70,6 @@ def a_star(graph, start, goal):
     
     return None
 
-# Dijkstra Algoritması
 def dijkstra(graph, start, goal):
     distances = {node: float('infinity') for node in graph}
     distances[start] = 0
@@ -103,7 +102,6 @@ def dijkstra(graph, start, goal):
     
     return path if path[0] == start else None
 
-# Bellman-Ford Algoritması
 def bellman_ford(graph, start, goal):
     distances = {node: float('infinity') for node in graph}
     previous = {node: None for node in graph}
@@ -125,97 +123,78 @@ def bellman_ford(graph, start, goal):
     path.reverse()
     return path if path and path[0] == start else None
 
-# Görselleştirme
 def visualize_path(start_x, start_y, goal_x, goal_y, algorithm):
-    start = (start_x, start_y)
-    goal = (goal_x, goal_y)
+    start = (int(start_x), int(start_y))
+    goal = (int(goal_x), int(goal_y))
     
-    # Algoritma seçimi
     if algorithm == "A*":
         path = a_star(GRAPH, start, goal)
-        color = '#2196F3'
+        color = '#00FF00'
         title = "A* Algorithm"
     elif algorithm == "Dijkstra":
         path = dijkstra(GRAPH, start, goal)
-        color = '#FF9800'
+        color = '#FFA500'
         title = "Dijkstra Algorithm"
-    else:  # Bellman-Ford
+    else:
         path = bellman_ford(GRAPH, start, goal)
-        color = '#F44336'
+        color = '#FF0000'
         title = "Bellman-Ford Algorithm"
     
-    # Matplotlib ile görselleştirme
+    # Arka plan resmini yükle
+    bg_img = Image.open('static/images/map.jpg')
+    bg_width, bg_height = bg_img.size
+    
+    # Her hücrenin piksel boyutu
+    tile_width = bg_width / COLS
+    tile_height = bg_height / ROWS
+    
     fig, ax = plt.subplots(figsize=(14, 8))
     
-    # Grid çiz
-    for y in range(ROWS):
-        for x in range(COLS):
-            cost = GRID[y][x]
-            # Maliyet değerine göre renk
-            if cost == 1:
-                cell_color = '#E8F5E9'
-            elif cost <= 3:
-                cell_color = '#FFF9C4'
-            elif cost <= 6:
-                cell_color = '#FFE0B2'
-            else:
-                cell_color = '#FFCDD2'
-            
-            rect = Rectangle((x, ROWS - y - 1), 1, 1, 
-                           facecolor=cell_color, 
-                           edgecolor='gray', 
-                           linewidth=0.5)
-            ax.add_patch(rect)
-            
-            # Maliyet değerini yaz
-            ax.text(x + 0.5, ROWS - y - 0.5, str(cost),
-                   ha='center', va='center', 
-                   fontsize=10, color='#424242', weight='bold')
+    # Arka plan resmini göster
+    ax.imshow(bg_img, extent=[0, COLS, 0, ROWS], aspect='auto')
     
-    # Yolu çiz
+    # Path'i çiz
     if path:
+        # Path çizgisi
+        path_x = [x + 0.5 for x, y in path]
+        path_y = [ROWS - y - 0.5 for x, y in path]
+        ax.plot(path_x, path_y, color=color, linewidth=4, alpha=0.7, zorder=5)
+        
+        # Start ve goal noktaları
         for i, (x, y) in enumerate(path):
             if (x, y) == start:
-                circle_color = '#4CAF50'
-                label = 'Start'
+                circle = plt.Circle((x + 0.5, ROWS - y - 0.5), 0.4,
+                                  color='#00FF00', edgecolor='white', 
+                                  linewidth=3, zorder=10)
+                ax.add_patch(circle)
+                ax.text(x + 0.5, ROWS - y - 0.5, 'S',
+                       ha='center', va='center', 
+                       fontsize=14, color='white', weight='bold', zorder=11)
             elif (x, y) == goal:
-                circle_color = '#F44336'
-                label = 'Goal'
-            else:
-                circle_color = color
-                label = 'Path'
-            
-            circle = plt.Circle((x + 0.5, ROWS - y - 0.5), 0.3,
-                              color=circle_color, zorder=10)
-            ax.add_patch(circle)
+                circle = plt.Circle((x + 0.5, ROWS - y - 0.5), 0.4,
+                                  color='#FF0000', edgecolor='white',
+                                  linewidth=3, zorder=10)
+                ax.add_patch(circle)
+                ax.text(x + 0.5, ROWS - y - 0.5, 'G',
+                       ha='center', va='center',
+                       fontsize=14, color='white', weight='bold', zorder=11)
         
         path_length = sum(GRID[y][x] for x, y in path[1:])
-        info_text = f"Path Length: {len(path)} nodes\nTotal Cost: {path_length}"
+        info_text = f"{title}\nPath: {len(path)} nodes | Cost: {path_length}"
     else:
-        info_text = "No path found!"
+        info_text = f"{title}\nNo path found!"
     
     ax.set_xlim(0, COLS)
     ax.set_ylim(0, ROWS)
     ax.set_aspect('equal')
     ax.axis('off')
-    ax.set_title(f'{title}\n{info_text}', fontsize=16, weight='bold', pad=20)
-    
-    # Legend
-    from matplotlib.patches import Patch
-    legend_elements = [
-        Patch(facecolor='#4CAF50', label='Start'),
-        Patch(facecolor='#F44336', label='Goal'),
-        Patch(facecolor=color, label='Path'),
-        Patch(facecolor='#E8F5E9', label='Low Cost (1)'),
-        Patch(facecolor='#FFF9C4', label='Medium Cost (2-3)'),
-        Patch(facecolor='#FFE0B2', label='High Cost (4-6)'),
-        Patch(facecolor='#FFCDD2', label='Very High Cost (7-9)')
-    ]
-    ax.legend(handles=legend_elements, loc='upper left', bbox_to_anchor=(1, 1))
+    ax.text(COLS/2, ROWS + 0.5, info_text, 
+           ha='center', va='bottom',
+           fontsize=14, weight='bold',
+           bbox=dict(boxstyle='round', facecolor='white', alpha=0.8))
     
     plt.tight_layout()
     
-    # PIL Image'e çevir
     buf = io.BytesIO()
     plt.savefig(buf, format='png', dpi=100, bbox_inches='tight')
     buf.seek(0)
@@ -224,60 +203,28 @@ def visualize_path(start_x, start_y, goal_x, goal_y, algorithm):
     
     return img
 
-# Gradio Arayüzü
-with gr.Blocks(title="Path Finding Algorithms", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    # 🗺️ Path Finding Algorithms Visualizer
-    
-    Select start and goal positions, choose an algorithm, and visualize the shortest path!
-    
-    ### 📊 Algorithms:
-    - **A\***: Heuristic-based, fastest with known goal
-    - **Dijkstra**: Classic shortest path algorithm
-    - **Bellman-Ford**: Handles negative weights, detects negative cycles
-    """)
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("### ⚙️ Settings")
-            
-            algorithm = gr.Radio(
-                choices=["A*", "Dijkstra", "Bellman-Ford"],
-                value="A*",
-                label="Algorithm"
-            )
-            
-            with gr.Row():
-                start_x = gr.Slider(0, 11, value=0, step=1, label="Start X")
-                start_y = gr.Slider(0, 7, value=7, step=1, label="Start Y")
-            
-            with gr.Row():
-                goal_x = gr.Slider(0, 11, value=11, step=1, label="Goal X")
-                goal_y = gr.Slider(0, 7, value=0, step=1, label="Goal Y")
-            
-            find_btn = gr.Button("🔍 Find Path", variant="primary", size="lg")
-            
-            gr.Markdown("""
-            ### 📝 Info:
-            - **Grid Size**: 12x8
-            - **Cost Range**: 1-9
-            - **Green**: Start point
-            - **Red**: Goal point
-            - **Blue/Orange/Red**: Path (depends on algorithm)
-            """)
-        
-        with gr.Column(scale=2):
-            output_image = gr.Image(label="Visualization", type="pil")
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/find_path', methods=['POST'])
+def find_path():
+    data = request.json
+    start_x = int(data['start_x'])
+    start_y = int(data['start_y'])
+    goal_x = int(data['goal_x'])
+    goal_y = int(data['goal_y'])
+    algorithm = data['algorithm']
+    
+    img = visualize_path(start_x, start_y, goal_x, goal_y, algorithm)
+    
+    # PIL Image'i base64'e çevir
+    buf = io.BytesIO()
+    img.save(buf, format='PNG')
+    buf.seek(0)
+    img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
     
-    find_btn.click(
-        fn=visualize_path,
-        inputs=[start_x, start_y, goal_x, goal_y, algorithm],
-        outputs=output_image
-    )
+    return jsonify({'image': f'data:image/png;base64,{img_base64}'})
 
 if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False
-    )
+    app.run(host="0.0.0.0", port=7860, debug=False)

docker-compose.yml

@@ -1,11 +0,0 @@
-version: '3.8'
-
-services:
-  pathfinding:
-    build: .
-    ports:
-      - "7860:7860"
-    environment:
-      - GRADIO_SERVER_NAME=0.0.0.0
-      - GRADIO_SERVER_PORT=7860
-    restart: unless-stopped

main.py

@@ -1,87 +0,0 @@
-import pygame as pg
-from heapq import *
-from A_Star import a_star
-from Dijkstra import dijkstra
-from Bellman_Ford import bellman_ford
-
-# Konumun merkezine yerleştirilen çemberin pozisyonunu döndürüyor
-def get_circle(x, y):
-    return (x * TILE + TILE // 2, y * TILE + TILE // 2), TILE // 7  # Çemberin merkezini ve yarıçapını döndür
-
-# Komşu hücreleri kontrol ediyor
-def neighbor_control(x, y):
-    # Komşuların hangi yönlerde olduğunu belirleyen liste (sol, yukarı, sağ, aşağı)
-    ways = [-1, 0], [0, -1], [1, 0], [0, 1]
-    neighbor = []
-
-    for dx, dy in ways:
-        new_dx, new_dy = x + dx, y + dy
-        # Komşu hücrelerin oyun alanı sınırları içinde olup olmadığını kontrol et
-        if cols > new_dx >= 0 and rows > new_dy >= 0:
-            neighbor.append((grid[new_dy][new_dx], (new_dx, new_dy)))  # Geçerli komşuyu listeye ekle
-    return neighbor
-
-# Fare ile tıklanan hücreyi seçiyor.
-def get_click_mouse_pos():
-    x, y = pg.mouse.get_pos()  # Fare imlecinin konumunu al
-    grid_x, grid_y = x // TILE, y // TILE  # Imlecin bulunduğu grid hücresini bul
-    pg.draw.circle(sc, pg.Color('black'), * ((grid_x * TILE + TILE // 2, grid_y * TILE + TILE // 2), TILE // 7))  # Hücrede kırmızı çember çiz
-    click = pg.mouse.get_pressed()  # Fare tıklaması kontrolü
-    return (grid_x, grid_y) if click[0] else False  # Sol tıklama yapılmışsa pozisyonu döndür, aksi halde False döndür
-
-# Oyun alanının boyutları (kolonlar, satırlar ve hücre boyutu)
-cols, rows = 12, 8
-TILE = 70  # Her bir hücrenin piksel boyutu
-
-# Pygame başlatma ve ekran ayarlama
-pg.init()
-sc = pg.display.set_mode([cols * TILE, rows * TILE])  
-clock = pg.time.Clock()
-
-# Oyun alanı için grid oluşturma (her hücrede maliyetler)
-grid = [[4, 4, 4, 4, 4, 4, 4, 2, 3, 2, 4, 2], 
-        [4, 4, 4, 4, 9, 9, 3, 2, 2, 4, 4, 4], 
-        [4, 4, 2, 4, 2, 2, 2, 1, 1, 9, 9, 4], 
-        [4, 2, 2, 4, 2, 2, 1, 1, 1, 4, 4, 2], 
-        [1, 1, 2, 1, 1, 1, 1, 9, 1, 1, 1, 1], 
-        [4, 1, 2, 1, 9, 2, 1, 1, 1, 9, 2, 2], 
-        [4, 1, 4, 1, 2, 4, 4, 1, 1, 4, 4, 2], 
-        [1, 1, 1, 1, 2, 4, 2, 2, 1, 2, 3, 2]]
-
-# Oyun alanı için graph oluşturma (komşuluk ilişkileri ile)
-graph = {}
-for y, row in enumerate(grid):
-    for x, col in enumerate(row):
-        graph[(x, y)] = graph.get((x, y), []) + neighbor_control(x, y)
-
-# Başlangıç ve hedef konum
-start = (0, 7)
-goal = start
-visited = []
-
-# Arka plan resmi yükleme ve ölçeklendirme
-bg = pg.image.load('./resim/map.jpg').convert()
-bg = pg.transform.scale(bg, (cols * TILE, rows * TILE))
-
-# Oyun döngüsü
-while True:
-
-    sc.blit(bg, (0, 0))  
-    mouse_pos = get_click_mouse_pos() 
-    if mouse_pos:
-        #visited = a_star(graph, start, mouse_pos)  # A* algoritmasını çalıştır ve yolu bul
-        #visited = dijkstra(graph, start, mouse_pos)  # dijkstra algoritmasını çalıştır ve yolu bul
-        visited = bellman_ford(graph, start, mouse_pos)  # bellman_ford algoritmasını çalıştır ve yolu bul
-
-
-        goal = mouse_pos  # Hedefi fare ile tıklanan pozisyona ayarla
-
-    if visited:
-        for path_segment in visited:
-            pg.draw.circle(sc, pg.Color('blue'), *get_circle(*path_segment))  # Bulunan yol üzerindeki hücreleri maviyle işaretle
-    pg.draw.circle(sc, pg.Color('green'), *get_circle(*start))  # Başlangıç hücresini yeşille işaretle
-    pg.draw.circle(sc, pg.Color('red'), *get_circle(*goal))  # Hedef hücresini kırmızı işaretle
-
-    [exit() for event in pg.event.get() if event.type == pg.QUIT]  
-    pg.display.flip()  
-    clock.tick(30) 

requirements.txt

@@ -1,4 +1,4 @@
-gradio==4.16.0
+Flask==3.0.0
 numpy==1.24.3
 matplotlib==3.7.1
 Pillow==10.2.0

run_local.sh

@@ -1,30 +0,0 @@
-#!/bin/bash
-
-echo "🚀 Starting Path Finding Algorithms Visualizer..."
-echo ""
-
-# Check if Docker is installed
-if ! command -v docker &> /dev/null; then
-    echo "❌ Docker is not installed. Please install Docker first."
-    echo "Visit: https://docs.docker.com/get-docker/"
-    exit 1
-fi
-
-# Build Docker image
-echo "📦 Building Docker image..."
-docker build -t pathfinding-app .
-
-if [ $? -ne 0 ]; then
-    echo "❌ Docker build failed!"
-    exit 1
-fi
-
-echo "✅ Docker image built successfully!"
-echo ""
-
-# Run container
-echo "🏃 Running container..."
-docker run -p 7860:7860 pathfinding-app
-
-# Or use docker-compose
-# docker-compose up

templates/index.html

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Path Finding Algorithms Visualizer</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .header h1 {
+            color: #667eea;
+            font-weight: bold;
+        }
+        .controls-panel {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+        }
+        .slider-container {
+            margin: 15px 0;
+        }
+        .slider-label {
+            font-weight: 600;
+            color: #495057;
+            margin-bottom: 5px;
+        }
+        .slider-value {
+            display: inline-block;
+            min-width: 30px;
+            text-align: center;
+            font-weight: bold;
+            color: #667eea;
+        }
+        .btn-find {
+            width: 100%;
+            padding: 12px;
+            font-size: 18px;
+            font-weight: bold;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            margin-top: 20px;
+        }
+        .btn-find:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        #resultImage {
+            max-width: 100%;
+            border-radius: 10px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+        }
+        .info-box {
+            background: #e7f3ff;
+            padding: 15px;
+            border-radius: 8px;
+            border-left: 4px solid #667eea;
+            margin-top: 20px;
+        }
+        .info-box h6 {
+            color: #667eea;
+            font-weight: bold;
+        }
+        .algorithm-btn {
+            margin: 5px;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 40px;
+        }
+        .spinner-border {
+            color: #667eea;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🗺️ Path Finding Algorithms Visualizer</h1>
+            <p class="text-muted">Select start and goal positions, choose an algorithm, and visualize the shortest path!</p>
+        </div>
+
+        <div class="row">
+            <div class="col-lg-4">
+                <div class="controls-panel">
+                    <h5 class="mb-3">⚙️ Settings</h5>
+                    
+                    <!-- Algorithm Selection -->
+                    <div class="mb-4">
+                        <label class="slider-label">🎯 Algorithm</label>
+                        <div class="btn-group-vertical w-100" role="group">
+                            <input type="radio" class="btn-check" name="algorithm" id="astar" value="A*" checked>
+                            <label class="btn btn-outline-primary algorithm-btn" for="astar">
+                                A* (Fastest)
+                            </label>
+
+                            <input type="radio" class="btn-check" name="algorithm" id="dijkstra" value="Dijkstra">
+                            <label class="btn btn-outline-warning algorithm-btn" for="dijkstra">
+                                Dijkstra (Classic)
+                            </label>
+
+                            <input type="radio" class="btn-check" name="algorithm" id="bellman" value="Bellman-Ford">
+                            <label class="btn btn-outline-danger algorithm-btn" for="bellman">
+                                Bellman-Ford (Robust)
+                            </label>
+                        </div>
+                    </div>
+
+                    <!-- Start Position -->
+                    <h6 class="mt-4">📍 Start Position</h6>
+                    <div class="slider-container">
+                        <label class="slider-label">
+                            X: <span class="slider-value" id="startXValue">0</span>
+                        </label>
+                        <input type="range" class="form-range" id="startX" min="0" max="11" value="0">
+                    </div>
+                    <div class="slider-container">
+                        <label class="slider-label">
+                            Y: <span class="slider-value" id="startYValue">7</span>
+                        </label>
+                        <input type="range" class="form-range" id="startY" min="0" max="7" value="7">
+                    </div>
+
+                    <!-- Goal Position -->
+                    <h6 class="mt-4">🎯 Goal Position</h6>
+                    <div class="slider-container">
+                        <label class="slider-label">
+                            X: <span class="slider-value" id="goalXValue">11</span>
+                        </label>
+                        <input type="range" class="form-range" id="goalX" min="0" max="11" value="11">
+                    </div>
+                    <div class="slider-container">
+                        <label class="slider-label">
+                            Y: <span class="slider-value" id="goalYValue">0</span>
+                        </label>
+                        <input type="range" class="form-range" id="goalY" min="0" max="7" value="0">
+                    </div>
+
+                    <!-- Find Path Button -->
+                    <button class="btn btn-primary btn-find" onclick="findPath()">
+                        🔍 Find Path
+                    </button>
+
+                    <!-- Info Box -->
+                    <div class="info-box">
+                        <h6>📝 Grid Info</h6>
+                        <ul class="small mb-0">
+                            <li><strong>Size:</strong> 12x8 cells</li>
+                            <li><strong>Cost Range:</strong> 1-9</li>
+                            <li><strong>Green:</strong> Start</li>
+                            <li><strong>Red:</strong> Goal</li>
+                            <li><strong>Blue/Orange/Red:</strong> Path</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-lg-8">
+                <div class="visualization-panel">
+                    <h5 class="mb-3">🗺️ Visualization</h5>
+                    <div id="loading" class="loading">
+                        <div class="spinner-border" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p class="mt-3">Calculating path...</p>
+                    </div>
+                    <div id="imageContainer">
+                        <img id="resultImage" src="" alt="Path visualization will appear here">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Update slider values
+        document.getElementById('startX').addEventListener('input', function() {
+            document.getElementById('startXValue').textContent = this.value;
+        });
+        document.getElementById('startY').addEventListener('input', function() {
+            document.getElementById('startYValue').textContent = this.value;
+        });
+        document.getElementById('goalX').addEventListener('input', function() {
+            document.getElementById('goalXValue').textContent = this.value;
+        });
+        document.getElementById('goalY').addEventListener('input', function() {
+            document.getElementById('goalYValue').textContent = this.value;
+        });
+
+        // Load initial visualization
+        window.onload = function() {
+            findPath();
+        };
+
+        // Find Path function
+        async function findPath() {
+            const startX = document.getElementById('startX').value;
+            const startY = document.getElementById('startY').value;
+            const goalX = document.getElementById('goalX').value;
+            const goalY = document.getElementById('goalY').value;
+            const algorithm = document.querySelector('input[name="algorithm"]:checked').value;
+
+            // Show loading
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('imageContainer').style.display = 'none';
+
+            try {
+                const response = await fetch('/find_path', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        start_x: startX,
+                        start_y: startY,
+                        goal_x: goalX,
+                        goal_y: goalY,
+                        algorithm: algorithm
+                    })
+                });
+
+                const data = await response.json();
+                
+                // Hide loading, show image
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('imageContainer').style.display = 'block';
+                document.getElementById('resultImage').src = data.image;
+            } catch (error) {
+                console.error('Error:', error);
+                alert('An error occurred while finding the path. Please try again.');
+                document.getElementById('loading').style.display = 'none';
+                document.getElementById('imageContainer').style.display = 'block';
+            }
+        }
+    </script>
+</body>
+</html>