main update

Author: danielviki

backend/app.py

@@ -0,0 +1,75 @@
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+import sys
+import os
+
+# Add the parent directory to Python path to import playground
+sys.path.append(os.path.dirname(os.path.dirname(__file__)))
+from backend.services.playground import bubble_sort, insertion_sort, selection_sort, quick_sort, merge_sort, shell_sort, heap_sort
+
+app = Flask(__name__)
+CORS(app)
+
+# Global variable to store sorting steps
+sorting_steps = []
+
+def clear_steps():
+    global sorting_steps
+    sorting_steps = []
+
+def add_step(step):
+    global sorting_steps
+    sorting_steps.append(step)
+
+# Modify the original print statements to store steps
+def custom_print(message):
+    add_step(message)
+
+@app.route('/api/sort', methods=['POST'])
+def sort():
+    data = request.get_json()
+    numbers = data.get('numbers', [])
+    method = data.get('method', 'bubble')
+    
+    # Clear previous steps
+    clear_steps()
+    
+    # Create a copy of the numbers to avoid modifying the original
+    numbers_copy = numbers.copy()
+    
+    # Dictionary of sorting functions
+    sort_functions = {
+        'bubble': bubble_sort,
+        'insertion': insertion_sort,
+        'selection': selection_sort,
+        'merge': merge_sort,
+        'quick': quick_sort,
+        'shell': shell_sort,
+        'heap': heap_sort
+    }
+    
+    if method not in sort_functions:
+        return jsonify({'error': 'Invalid sorting method'}), 400
+    
+    # Temporarily redirect print output to our custom function
+    import builtins
+    original_print = builtins.print
+    builtins.print = custom_print
+    
+    try:
+        # Run the sorting algorithm
+        sorted_numbers = sort_functions[method](numbers_copy)
+        
+        # Restore original print function
+        builtins.print = original_print
+        
+        return jsonify({
+            'sorted': sorted_numbers,
+            'steps': sorting_steps
+        })
+    except Exception as e:
+        builtins.print = original_print
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)

playground.py renamed to backend/services/playground.py

@@ -24,32 +24,55 @@ def selection_sort(a):
         print(f"选择交换 {a[i]}↔{a[min_idx]}，当前序列：{a}")
     return a
 
-def quick_sort(a):
-    if len(a) <= 1:
+def quick_sort(a, start=None, end=None):
+    if start is None:
+        start = 0
+        end = len(a) - 1
+    
+    if start >= end:
         return a
-    pivot = a[len(a)//2]
-    left = [x for x in a if x < pivot]
-    middle = [x for x in a if x == pivot]
-    right = [x for x in a if x > pivot]
-    return quick_sort(left) + middle + quick_sort(right)
+
+    pivot = a[end]
+    i = start - 1
+
+    for j in range(start, end):
+        if a[j] <= pivot:
+            i += 1
+            if i != j:
+                a[i], a[j] = a[j], a[i]
+                print(f"快速排序交换 {a[i]}↔{a[j]}，当前序列：{a}")
+
+    a[i + 1], a[end] = a[end], a[i + 1]
+    if i + 1 != end:
+        print(f"快速排序放置基准 {a[i + 1]}，当前序列：{a}")
+
+    quick_sort(a, start, i)
+    quick_sort(a, i + 2, end)
+    return a
 
 def merge_sort(a):
     if len(a) <= 1:
         return a
-    mid = len(a)//2
+        
+    mid = len(a) // 2
     left = merge_sort(a[:mid])
     right = merge_sort(a[mid:])
-    return merge(left, right)
+    print(f"归并排序分解：左半部分 {left}，右半部分 {right}")
+    result = merge(left, right)
+    print(f"归并排序合并结果：{result}")
+    return result
 
 def merge(left, right):
     result = []
     i = j = 0
     while i < len(left) and j < len(right):
         if left[i] < right[j]:
             result.append(left[i])
+            print(f"归并取左边元素 {left[i]}")
             i += 1
         else:
             result.append(right[j])
+            print(f"归并取右边元素 {right[j]}")
             j += 1
     result.extend(left[i:])
     result.extend(right[j:])
@@ -59,13 +82,17 @@ def shell_sort(a):
     n = len(a)
     gap = n // 2
     while gap > 0:
+        print(f"希尔排序当前间隔：{gap}")
         for i in range(gap, n):
             temp = a[i]
             j = i
             while j >= gap and a[j - gap] > temp:
                 a[j] = a[j - gap]
+                print(f"希尔排序移动 {a[j]}→位置{j}，当前序列：{a}")
                 j -= gap
             a[j] = temp
+            if j != i:
+                print(f"希尔排序插入 {temp}到位置{j}，当前序列：{a}")
         gap //= 2
     return a
 
@@ -74,20 +101,29 @@ def heapify(a, n, i):
         largest = i
         l = 2 * i + 1
         r = 2 * i + 2
+        
         if l < n and a[i] < a[l]:
             largest = l
         if r < n and a[largest] < a[r]:
             largest = r
+            
         if largest != i:
             a[i], a[largest] = a[largest], a[i]
+            print(f"堆排序调整 {a[i]}↔{a[largest]}，当前序列：{a}")
             heapify(a, n, largest)
 
     n = len(a)
+    # Build max heap
     for i in range(n//2 - 1, -1, -1):
         heapify(a, n, i)
+        print(f"堆排序建堆阶段，当前序列：{a}")
+    
+    # Extract elements from heap one by one
     for i in range(n-1, 0, -1):
         a[i], a[0] = a[0], a[i]
+        print(f"堆排序取出最大值 {a[i]}，当前序列：{a}")
         heapify(a, i, 0)
+    
     return a
 
 if __name__ == "__main__":

frontend/index.html

@@ -1,16 +1,54 @@
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>我的网站</title>
+    <title>Sorting Visualizer</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <h1>欢迎访问我的网站</h1>
-    <button onclick="showMessage()">点我</button>
-    <p id="msg"></p>
+    <div class="container">
+        <h1>Sorting Visualizer</h1>
+        
+        <div class="input-section">
+            <div class="method-selector">
+                <label for="sortMethod">Select Sorting Method:</label>
+                <select id="sortMethod">
+                    <option value="bubble">Bubble Sort</option>
+                    <option value="insertion">Insertion Sort</option>
+                    <option value="selection">Selection Sort</option>
+                    <option value="merge">Merge Sort</option>
+                    <option value="quick">Quick Sort</option>
+                    <option value="shell">Shell Sort</option>
+                    <option value="heap">Heap Sort</option>
+                </select>
+            </div>
 
+            <div class="numbers-input">
+                <label>Enter 5 Numbers:</label>
+                <div class="input-group">
+                    <input type="number" class="number-input" placeholder="Number 1">
+                    <input type="number" class="number-input" placeholder="Number 2">
+                    <input type="number" class="number-input" placeholder="Number 3">
+                    <input type="number" class="number-input" placeholder="Number 4">
+                    <input type="number" class="number-input" placeholder="Number 5">
+                </div>
+            </div>
+
+            <button id="sortButton">Sort Numbers</button>
+        </div>
+
+        <div class="output-section">
+            <div class="steps-container">
+                <h2>Sorting Steps:</h2>
+                <div id="sortingSteps" class="steps-list"></div>
+            </div>
+            <div class="result-container">
+                <h2>Final Result:</h2>
+                <div id="sortingResult" class="result"></div>
+            </div>
+        </div>
+    </div>
     <script src="script.js"></script>
 </body>
 </html>

frontend/script.js

@@ -1,3 +1,66 @@
-function showMessage() {
-    document.getElementById("msg").innerText = "你点击了按钮！";
-}
+document.addEventListener('DOMContentLoaded', function() {
+    const sortButton = document.getElementById('sortButton');
+    const sortingSteps = document.getElementById('sortingSteps');
+    const sortingResult = document.getElementById('sortingResult');
+
+    sortButton.addEventListener('click', async function() {
+        // Clear previous results
+        sortingSteps.innerHTML = '';
+        sortingResult.innerHTML = '';
+
+        // Get selected sort method
+        const method = document.getElementById('sortMethod').value;
+
+        // Get numbers from inputs
+        const numbers = Array.from(document.querySelectorAll('.number-input'))
+            .map(input => parseInt(input.value));
+
+        // Validate inputs
+        if (numbers.some(isNaN)) {
+            alert('Please enter valid numbers in all fields');
+            return;
+        }
+
+        try {
+            // Disable button while sorting
+            sortButton.disabled = true;
+            sortButton.textContent = 'Sorting...';
+
+            // Send request to backend
+            const response = await fetch('http://localhost:5000/api/sort', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    method: method,
+                    numbers: numbers
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.error) {
+                throw new Error(data.error);
+            }
+
+            // Display sorting steps
+            data.steps.forEach((step, index) => {
+                const stepElement = document.createElement('div');
+                stepElement.className = 'step-item';
+                stepElement.textContent = `Step ${index + 1}: ${step}`;
+                sortingSteps.appendChild(stepElement);
+            });
+
+            // Display final result
+            sortingResult.textContent = `[${data.sorted.join(', ')}]`;
+
+        } catch (error) {
+            sortingResult.textContent = `Error: ${error.message}`;
+        } finally {
+            // Re-enable button
+            sortButton.disabled = false;
+            sortButton.textContent = 'Sort Numbers';
+        }
+    });
+});