Spaces:

1bo
/

sort-animal

Running

App Files Files Community

1bo commited on Apr 3, 2025

Commit

cd8991d

verified ·

1 Parent(s): 146ce44

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +1121 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sort Animal
-emoji: 🌖
 colorFrom: blue
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sort-animal
+emoji: 🐳
 colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1121 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>算法可视化 - 排序算法</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
+        :root {
+            --primary: #6366f1;
+            --secondary: #8b5cf6;
+            --accent: #ec4899;
+            --dark: #1e293b;
+            --darker: #0f172a;
+        }
+        body {
+            font-family: 'Roboto Mono', monospace;
+            background-color: var(--darker);
+            color: white;
+            overflow-x: hidden;
+        }
+        .array-bar {
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            border-radius: 4px 4px 0 0;
+            background-color: var(--primary);
+            position: relative;
+        }
+        .array-bar.comparing {
+            background-color: var(--accent);
+            transform: scale(1.05);
+        }
+        .array-bar.sorted {
+            background-color: #10b981;
+        }
+        .array-bar.pivot {
+            background-color: #f59e0b;
+        }
+        .array-bar.swapping {
+            background-color: #ef4444;
+        }
+        .array-bar.min {
+            background-color: #3b82f6;
+        }
+        .code-line.highlight {
+            background-color: rgba(99, 102, 241, 0.2);
+            border-left: 3px solid var(--primary);
+        }
+        .visualization-container {
+            perspective: 1000px;
+        }
+        .algorithm-card {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .algorithm-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        .tooltip {
+            position: relative;
+        }
+        .tooltip-text {
+            visibility: hidden;
+            width: 200px;
+            background-color: var(--dark);
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 8px;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
+        }
+        .slider-thumb::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary);
+            cursor: pointer;
+        }
+        .slider-thumb::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary);
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-indigo-900 to-purple-900 py-6 shadow-lg">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <h1 class="text-3xl font-bold text-white mb-4 md:mb-0">
+                    <i class="fas fa-sort-amount-down-alt mr-2"></i>
+                    排序算法可视化
+                </h1>
+                <div class="flex items-center space-x-4">
+                    <div class="tooltip">
+                        <button id="reset-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition">
+                            <i class="fas fa-redo mr-2"></i>重置
+                        </button>
+                        <span class="tooltip-text">重置当前算法的可视化</span>
+                    </div>
+                    <div class="tooltip">
+                        <button id="randomize-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
+                            <i class="fas fa-random mr-2"></i>随机化
+                        </button>
+                        <span class="tooltip-text">生成新的随机数组</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Controls -->
+        <div class="bg-slate-800 rounded-xl p-6 mb-8 shadow-lg">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div>
+                    <label for="array-size" class="block text-sm font-medium mb-2">数组大小</label>
+                    <input type="range" id="array-size" min="5" max="30" value="15" class="w-full slider-thumb">
+                    <div class="flex justify-between text-xs text-gray-400 mt-1">
+                        <span>5</span>
+                        <span>30</span>
+                    </div>
+                </div>
+                <div>
+                    <label for="speed" class="block text-sm font-medium mb-2">动画速度</label>
+                    <input type="range" id="speed" min="1" max="10" value="5" class="w-full slider-thumb">
+                    <div class="flex justify-between text-xs text-gray-400 mt-1">
+                        <span>慢</span>
+                        <span>快</span>
+                    </div>
+                </div>
+                <div>
+                    <label for="algorithm" class="block text-sm font-medium mb-2">排序算法</label>
+                    <select id="algorithm" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        <option value="bubble">冒泡排序</option>
+                        <option value="selection">选择排序</option>
+                        <option value="insertion">插入排序</option>
+                        <option value="merge">归并排序</option>
+                        <option value="quick">快速排序</option>
+                        <option value="heap">堆排序</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <!-- Visualization Area -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Visualization -->
+            <div class="lg:col-span-2">
+                <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
+                    <h2 class="text-xl font-semibold mb-4 flex items-center">
+                        <i class="fas fa-chart-bar mr-2"></i>
+                        <span id="algorithm-name">冒泡排序</span> 可视化
+                    </h2>
+                    <div class="visualization-container">
+                        <div id="array-container" class="flex items-end h-64 space-x-1 mt-4"></div>
+                    </div>
+                    <div class="mt-6 flex justify-center">
+                        <button id="start-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition flex items-center">
+                            <i class="fas fa-play mr-2"></i> 开始排序
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Algorithm Info -->
+            <div>
+                <div class="bg-slate-800 rounded-xl p-6 shadow-lg sticky top-6">
+                    <h2 class="text-xl font-semibold mb-4 flex items-center">
+                        <i class="fas fa-info-circle mr-2"></i>
+                        算法信息
+                    </h2>
+                    <div id="algorithm-info" class="space-y-4">
+                        <div>
+                            <h3 class="font-medium text-indigo-400">时间复杂度</h3>
+                            <p id="time-complexity" class="text-sm">O(n²) - 最坏和平均情况</p>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-indigo-400">空间复杂度</h3>
+                            <p id="space-complexity" class="text-sm">O(1) - 原地排序</p>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-indigo-400">稳定性</h3>
+                            <p id="stability" class="text-sm">稳定</p>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-indigo-400">算法描述</h3>
+                            <p id="algorithm-description" class="text-sm">
+                                冒泡排序通过重复地遍历要排序的列表，比较相邻的元素并交换���们的位置来完成排序。
+                                每一轮遍历都会将当前未排序部分的最大元素"冒泡"到正确的位置。
+                            </p>
+                        </div>
+                    </div>
+                    <div class="mt-6">
+                        <h3 class="font-medium mb-2 flex items-center">
+                            <i class="fas fa-code mr-2"></i>
+                            伪代码
+                        </h3>
+                        <div id="pseudo-code" class="bg-slate-900 p-4 rounded-lg font-mono text-sm overflow-auto">
+                            <pre>procedure bubbleSort(A : list of sortable items)
+    n := length(A)
+    repeat
+        swapped := false
+        for i := 1 to n-1 inclusive do
+            if A[i-1] > A[i] then
+                swap(A[i-1], A[i])
+                swapped := true
+            end if
+        end for
+        n := n - 1
+    until not swapped
+end procedure</pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Algorithm Comparison -->
+        <div class="mt-12">
+            <h2 class="text-2xl font-semibold mb-6 flex items-center">
+                <i class="fas fa-project-diagram mr-3"></i>
+                排序算法比较
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Bubble Sort Card -->
+                <div class="algorithm-card bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-lg border border-slate-700 cursor-pointer" data-algorithm="bubble">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
+                            <i class="fas fa-sort-amount-down"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold">冒泡排序</h3>
+                    </div>
+                    <p class="text-sm text-gray-400 mb-4">最简单的排序算法，通过重复交换相邻元素实现排序。</p>
+                    <div class="flex justify-between text-xs">
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(n²)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(1)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">稳定</span>
+                    </div>
+                </div>
+                <!-- Selection Sort Card -->
+                <div class="algorithm-card bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-lg border border-slate-700 cursor-pointer" data-algorithm="selection">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3">
+                            <i class="fas fa-mouse-pointer"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold">选择排序</h3>
+                    </div>
+                    <p class="text-sm text-gray-400 mb-4">每次选择最小元素放到已排序部分的末尾。</p>
+                    <div class="flex justify-between text-xs">
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(n²)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(1)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">不稳定</span>
+                    </div>
+                </div>
+                <!-- Insertion Sort Card -->
+                <div class="algorithm-card bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-lg border border-slate-700 cursor-pointer" data-algorithm="insertion">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-pink-600 flex items-center justify-center mr-3">
+                            <i class="fas fa-arrow-right-to-bracket"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold">插入排序</h3>
+                    </div>
+                    <p class="text-sm text-gray-400 mb-4">构建最终排序数组，一次插入一个元素。</p>
+                    <div class="flex justify-between text-xs">
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(n²)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(1)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">稳定</span>
+                    </div>
+                </div>
+                <!-- Merge Sort Card -->
+                <div class="algorithm-card bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-lg border border-slate-700 cursor-pointer" data-algorithm="merge">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
+                            <i class="fas fa-code-merge"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold">归并排序</h3>
+                    </div>
+                    <p class="text-sm text-gray-400 mb-4">分治算法，将数组分成两半，分别排序后合并。</p>
+                    <div class="flex justify-between text-xs">
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(n log n)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(n)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">稳定</span>
+                    </div>
+                </div>
+                <!-- Quick Sort Card -->
+                <div class="algorithm-card bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-lg border border-slate-700 cursor-pointer" data-algorithm="quick">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center mr-3">
+                            <i class="fas fa-bolt"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold">快速排序</h3>
+                    </div>
+                    <p class="text-sm text-gray-400 mb-4">分治算法，选择一个基准元素将数组分成两部分。</p>
+                    <div class="flex justify-between text-xs">
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(n log n)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(log n)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">不稳定</span>
+                    </div>
+                </div>
+                <!-- Heap Sort Card -->
+                <div class="algorithm-card bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-lg border border-slate-700 cursor-pointer" data-algorithm="heap">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center mr-3">
+                            <i class="fas fa-layer-group"></i>
+                        </div>
+                        <h3 class="text-lg font-semibold">堆排序</h3>
+                    </div>
+                    <p class="text-sm text-gray-400 mb-4">利用二叉堆数据结构进行排序。</p>
+                    <div class="flex justify-between text-xs">
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(n log n)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">O(1)</span>
+                        <span class="bg-slate-700 px-2 py-1 rounded">不稳定</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-slate-900 py-8 mt-12">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h3 class="text-xl font-semibold flex items-center">
+                        <i class="fas fa-sort-amount-down-alt mr-2"></i>
+                        排序算法可视化
+                    </h3>
+                    <p class="text-sm text-gray-400 mt-1">通过动画直观理解排序算法</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fab fa-twitter text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i class="fas fa-envelope text-xl"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-slate-800 mt-6 pt-6 text-center text-sm text-gray-500">
+                <p>© 2023 排序算法可视化. 所有权利保留.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // DOM Elements
+        const arrayContainer = document.getElementById('array-container');
+        const startBtn = document.getElementById('start-btn');
+        const resetBtn = document.getElementById('reset-btn');
+        const randomizeBtn = document.getElementById('randomize-btn');
+        const arraySizeSlider = document.getElementById('array-size');
+        const speedSlider = document.getElementById('speed');
+        const algorithmSelect = document.getElementById('algorithm');
+        const algorithmName = document.getElementById('algorithm-name');
+        // Algorithm info elements
+        const timeComplexity = document.getElementById('time-complexity');
+        const spaceComplexity = document.getElementById('space-complexity');
+        const stability = document.getElementById('stability');
+        const algorithmDescription = document.getElementById('algorithm-description');
+        const pseudoCode = document.getElementById('pseudo-code');
+        // Algorithm cards
+        const algorithmCards = document.querySelectorAll('.algorithm-card');
+        // Global variables
+        let array = [];
+        let arraySize = parseInt(arraySizeSlider.value);
+        let speed = parseInt(speedSlider.value);
+        let algorithm = algorithmSelect.value;
+        let isSorting = false;
+        let animationSpeed = 1000 - (speed * 100); // Convert speed to delay in ms
+        // Algorithm information
+        const algorithms = {
+            bubble: {
+                name: '冒泡排序',
+                time: 'O(n²) - 最坏和平均情况',
+                space: 'O(1) - 原地排序',
+                stable: '稳定',
+                description: '冒泡排序通过重复地遍历要排序的列表，比较相邻的元素并交换它们的位置来完成排序。每一轮遍历都会将当前未排序部分的最大元素"冒泡"到正确的位置。',
+                pseudoCode: `procedure bubbleSort(A : list of sortable items)
+    n := length(A)
+    repeat
+        swapped := false
+        for i := 1 to n-1 inclusive do
+            if A[i-1] > A[i] then
+                swap(A[i-1], A[i])
+                swapped := true
+            end if
+        end for
+        n := n - 1
+    until not swapped
+end procedure`
+            },
+            selection: {
+                name: '选择排序',
+                time: 'O(n²) - 所有情况',
+                space: 'O(1) - 原地排序',
+                stable: '不稳定',
+                description: '选择排序将数组分为已排序和未排序两部分，每次从未排序部分选择最小元素，放到已排序部分的末尾。',
+                pseudoCode: `procedure selectionSort(A : list of sortable items)
+    n := length(A)
+    for i := 0 to n-2 inclusive do
+        minIndex := i
+        for j := i+1 to n-1 inclusive do
+            if A[j] < A[minIndex] then
+                minIndex := j
+            end if
+        end for
+        if minIndex != i then
+            swap(A[i], A[minIndex])
+        end if
+    end for
+end procedure`
+            },
+            insertion: {
+                name: '插入排序',
+                time: 'O(n²) - 最坏和平均情况',
+                space: 'O(1) - 原地排序',
+                stable: '稳定',
+                description: '插入排序构建最终排序数组，一次插入一个元素。对于几乎排序好的数据效率很高。',
+                pseudoCode: `procedure insertionSort(A : list of sortable items)
+    n := length(A)
+    for i := 1 to n-1 inclusive do
+        key := A[i]
+        j := i - 1
+        while j >= 0 and A[j] > key do
+            A[j+1] := A[j]
+            j := j - 1
+        end while
+        A[j+1] := key
+    end for
+end procedure`
+            },
+            merge: {
+                name: '归并排序',
+                time: 'O(n log n) - 所有情况',
+                space: 'O(n) - 需要额外空间',
+                stable: '稳定',
+                description: '归并排序是分治算法，将数组分成两半，分别排序后合并。高效且稳定，但需要额外空间。',
+                pseudoCode: `procedure mergeSort(A : list of sortable items)
+    if length(A) <= 1 then
+        return A
+    end if
+    middle := length(A) / 2
+    left := A[0..middle-1]
+    right := A[middle..length(A)-1]
+    left := mergeSort(left)
+    right := mergeSort(right)
+    return merge(left, right)
+end procedure
+procedure merge(left, right)
+    result := []
+    while left not empty and right not empty do
+        if left[0] <= right[0] then
+            append left[0] to result
+            left := left[1..]
+        else
+            append right[0] to result
+            right := right[1..]
+        end if
+    end while
+    while left not empty do
+        append left[0] to result
+        left := left[1..]
+    end while
+    while right not empty do
+        append right[0] to result
+        right := right[1..]
+    end while
+    return result
+end procedure`
+            },
+            quick: {
+                name: '快速排序',
+                time: 'O(n log n) - 平均情况, O(n²) - 最坏情况',
+                space: 'O(log n) - 递归栈空间',
+                stable: '不稳定',
+                description: '快速排序是分治算法，选择一个基准元素将数组分成两部分，小于基准的放左边，大于基准的放右边，然后递归排序两部分。',
+                pseudoCode: `procedure quickSort(A : list of sortable items, low, high)
+    if low < high then
+        p := partition(A, low, high)
+        quickSort(A, low, p - 1)
+        quickSort(A, p + 1, high)
+    end if
+end procedure
+procedure partition(A, low, high)
+    pivot := A[high]
+    i := low - 1
+    for j := low to high-1 inclusive do
+        if A[j] < pivot then
+            i := i + 1
+            swap(A[i], A[j])
+        end if
+    end for
+    swap(A[i + 1], A[high])
+    return i + 1
+end procedure`
+            },
+            heap: {
+                name: '堆排序',
+                time: 'O(n log n) - 所有情况',
+                space: 'O(1) - 原地排序',
+                stable: '不稳定',
+                description: '堆排序利用二叉堆数据结构进行排序。首先构建最大堆，然后重复从堆中提取最大元素放到数组末尾。',
+                pseudoCode: `procedure heapSort(A : list of sortable items)
+    n := length(A)
+    // Build max heap
+    for i := n/2 - 1 downto 0 inclusive do
+        heapify(A, n, i)
+    end for
+    // Extract elements from heap
+    for i := n-1 downto 1 inclusive do
+        swap(A[0], A[i])
+        heapify(A, i, 0)
+    end for
+end procedure
+procedure heapify(A, n, i)
+    largest := i
+    left := 2*i + 1
+    right := 2*i + 2
+    if left < n and A[left] > A[largest] then
+        largest := left
+    end if
+    if right < n and A[right] > A[largest] then
+        largest := right
+    end if
+    if largest != i then
+        swap(A[i], A[largest])
+        heapify(A, n, largest)
+    end if
+end procedure`
+            }
+        };
+        // Initialize the array and visualization
+        function initArray() {
+            arrayContainer.innerHTML = '';
+            array = [];
+            // Generate random array
+            for (let i = 0; i < arraySize; i++) {
+                array.push(Math.floor(Math.random() * 100) + 10);
+            }
+            // Create bars for visualization
+            for (let i = 0; i < array.length; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'array-bar';
+                bar.style.height = `${array[i]}%`;
+                bar.style.width = `${100 / arraySize}%`;
+                bar.setAttribute('data-value', array[i]);
+                bar.textContent = array[i];
+                arrayContainer.appendChild(bar);
+            }
+            // Update algorithm info
+            updateAlgorithmInfo();
+        }
+        // Update algorithm information
+        function updateAlgorithmInfo() {
+            const algo = algorithms[algorithm];
+            algorithmName.textContent = algo.name;
+            timeComplexity.textContent = algo.time;
+            spaceComplexity.textContent = algo.space;
+            stability.textContent = algo.stable;
+            algorithmDescription.textContent = algo.description;
+            pseudoCode.innerHTML = `<pre>${algo.pseudoCode}</pre>`;
+        }
+        // Reset the array to its initial state
+        function resetArray() {
+            if (isSorting) return;
+            const bars = arrayContainer.querySelectorAll('.array-bar');
+            bars.forEach((bar, i) => {
+                bar.className = 'array-bar';
+                bar.style.height = `${array[i]}%`;
+                bar.textContent = array[i];
+            });
+        }
+        // Randomize the array
+        function randomizeArray() {
+            if (isSorting) return;
+            initArray();
+        }
+        // Change array size
+        function changeArraySize() {
+            if (isSorting) return;
+            arraySize = parseInt(arraySizeSlider.value);
+            initArray();
+        }
+        // Change speed
+        function changeSpeed() {
+            speed = parseInt(speedSlider.value);
+            animationSpeed = 1000 - (speed * 100);
+        }
+        // Change algorithm
+        function changeAlgorithm() {
+            if (isSorting) return;
+            algorithm = algorithmSelect.value;
+            updateAlgorithmInfo();
+        }
+        // Visualize the sorting algorithm
+        async function visualizeSort() {
+            if (isSorting) return;
+            isSorting = true;
+            startBtn.disabled = true;
+            startBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 排序中...';
+            // Get all bars
+            const bars = arrayContainer.querySelectorAll('.array-bar');
+            // Perform the selected algorithm
+            switch (algorithm) {
+                case 'bubble':
+                    await bubbleSort([...array], bars);
+                    break;
+                case 'selection':
+                    await selectionSort([...array], bars);
+                    break;
+                case 'insertion':
+                    await insertionSort([...array], bars);
+                    break;
+                case 'merge':
+                    await mergeSort([...array], bars, 0, array.length - 1);
+                    break;
+                case 'quick':
+                    await quickSort([...array], bars, 0, array.length - 1);
+                    break;
+                case 'heap':
+                    await heapSort([...array], bars);
+                    break;
+            }
+            // Mark all bars as sorted
+            for (let i = 0; i < bars.length; i++) {
+                bars[i].classList.add('sorted');
+                await sleep(animationSpeed / 10);
+            }
+            isSorting = false;
+            startBtn.disabled = false;
+            startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> 开始排序';
+        }
+        // Sleep function for animations
+        function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+        // Swap two elements in the array and visualize it
+        async function swapElements(arr, bars, i, j) {
+            // Highlight the elements being swapped
+            bars[i].classList.add('swapping');
+            bars[j].classList.add('swapping');
+            await sleep(animationSpeed);
+            // Swap the values
+            const temp = arr[i];
+            arr[i] = arr[j];
+            arr[j] = temp;
+            // Update the bars
+            bars[i].style.height = `${arr[i]}%`;
+            bars[i].setAttribute('data-value', arr[i]);
+            bars[i].textContent = arr[i];
+            bars[j].style.height = `${arr[j]}%`;
+            bars[j].setAttribute('data-value', arr[j]);
+            bars[j].textContent = arr[j];
+            // Remove the highlighting
+            bars[i].classList.remove('swapping');
+            bars[j].classList.remove('swapping');
+        }
+        // Compare two elements and visualize it
+        async function compareElements(bars, i, j) {
+            bars[i].classList.add('comparing');
+            bars[j].classList.add('comparing');
+            await sleep(animationSpeed);
+            bars[i].classList.remove('comparing');
+            bars[j].classList.remove('comparing');
+        }
+        // Mark an element as pivot
+        async function markPivot(bars, i) {
+            bars[i].classList.add('pivot');
+            await sleep(animationSpeed * 2);
+            bars[i].classList.remove('pivot');
+        }
+        // Mark an element as min
+        async function markMin(bars, i) {
+            bars[i].classList.add('min');
+            await sleep(animationSpeed);
+            bars[i].classList.remove('min');
+        }
+        // Bubble Sort algorithm
+        async function bubbleSort(arr, bars) {
+            let n = arr.length;
+            let swapped;
+            do {
+                swapped = false;
+                for (let i = 0; i < n - 1; i++) {
+                    await compareElements(bars, i, i + 1);
+                    if (arr[i] > arr[i + 1]) {
+                        await swapElements(arr, bars, i, i + 1);
+                        swapped = true;
+                    }
+                }
+                n--;
+                // Mark the last element as sorted
+                bars[n].classList.add('sorted');
+            } while (swapped);
+        }
+        // Selection Sort algorithm
+        async function selectionSort(arr, bars) {
+            const n = arr.length;
+            for (let i = 0; i < n - 1; i++) {
+                let minIndex = i;
+                // Mark current min
+                await markMin(bars, minIndex);
+                for (let j = i + 1; j < n; j++) {
+                    await compareElements(bars, minIndex, j);
+                    if (arr[j] < arr[minIndex]) {
+                        minIndex = j;
+                        await markMin(bars, minIndex);
+                    }
+                }
+                if (minIndex !== i) {
+                    await swapElements(arr, bars, i, minIndex);
+                }
+                // Mark the sorted element
+                bars[i].classList.add('sorted');
+            }
+            // Mark the last element as sorted
+            bars[n - 1].classList.add('sorted');
+        }
+        // Insertion Sort algorithm
+        async function insertionSort(arr, bars) {
+            const n = arr.length;
+            for (let i = 1; i < n; i++) {
+                const key = arr[i];
+                let j = i - 1;
+                // Highlight the current element being inserted
+                bars[i].classList.add('comparing');
+                await sleep(animationSpeed);
+                while (j >= 0 && arr[j] > key) {
+                    // Move the larger element one position ahead
+                    arr[j + 1] = arr[j];
+                    bars[j + 1].style.height = `${arr[j + 1]}%`;
+                    bars[j + 1].setAttribute('data-value', arr[j + 1]);
+                    bars[j + 1].textContent = arr[j + 1];
+                    // Highlight the comparison
+                    bars[j].classList.add('comparing');
+                    await sleep(animationSpeed);
+                    bars[j].classList.remove('comparing');
+                    j--;
+                }
+                // Insert the key in its correct position
+                arr[j + 1] = key;
+                bars[j + 1].style.height = `${arr[j + 1]}%`;
+                bars[j + 1].setAttribute('data-value', arr[j + 1]);
+                bars[j + 1].textContent = arr[j + 1];
+                // Remove highlighting
+                bars[i].classList.remove('comparing');
+                // Mark the sorted portion
+                for (let k = 0; k <= i; k++) {
+                    bars[k].classList.add('sorted');
+                }
+                await sleep(animationSpeed / 2);
+                for (let k = 0; k <= i; k++) {
+                    bars[k].classList.remove('sorted');
+                }
+            }
+            // Mark all as sorted at the end
+            for (let i = 0; i < n; i++) {
+                bars[i].classList.add('sorted');
+            }
+        }
+        // Merge Sort algorithm
+        async function mergeSort(arr, bars, l, r) {
+            if (l >= r) return;
+            const m = l + Math.floor((r - l) / 2);
+            // Visualize the division
+            for (let i = l; i <= r; i++) {
+                bars[i].classList.add('comparing');
+            }
+            await sleep(animationSpeed);
+            for (let i = l; i <= r; i++) {
+                bars[i].classList.remove('comparing');
+            }
+            await mergeSort(arr, bars, l, m);
+            await mergeSort(arr, bars, m + 1, r);
+            await merge(arr, bars, l, m, r);
+        }
+        // Merge helper function for Merge Sort
+        async function merge(arr, bars, l, m, r) {
+            const n1 = m - l + 1;
+            const n2 = r - m;
+            // Create temp arrays
+            const L = new Array(n1);
+            const R = new Array(n2);
+            // Copy data to temp arrays
+            for (let i = 0; i < n1; i++) {
+                L[i] = arr[l + i];
+            }
+            for (let j = 0; j < n2; j++) {
+                R[j] = arr[m + 1 + j];
+            }
+            // Merge the temp arrays back into arr[l..r]
+            let i = 0, j = 0, k = l;
+            while (i < n1 && j < n2) {
+                // Highlight the elements being compared
+                if (l + i <= m) bars[l + i].classList.add('comparing');
+                if (m + 1 + j <= r) bars[m + 1 + j].classList.add('comparing');
+                await sleep(animationSpeed);
+                if (L[i] <= R[j]) {
+                    arr[k] = L[i];
+                    bars[k].style.height = `${arr[k]}%`;
+                    bars[k].setAttribute('data-value', arr[k]);
+                    bars[k].textContent = arr[k];
+                    i++;
+                } else {
+                    arr[k] = R[j];
+                    bars[k].style.height = `${arr[k]}%`;
+                    bars[k].setAttribute('data-value', arr[k]);
+                    bars[k].textContent = arr[k];
+                    j++;
+                }
+                // Remove highlighting
+                if (l + i - 1 <= m) bars[l + i - 1].classList.remove('comparing');
+                if (m + j <= r) bars[m + j].classList.remove('comparing');
+                k++;
+            }
+            // Copy the remaining elements of L[], if any
+            while (i < n1) {
+                arr[k] = L[i];
+                bars[k].style.height = `${arr[k]}%`;
+                bars[k].setAttribute('data-value', arr[k]);
+                bars[k].textContent = arr[k];
+                i++;
+                k++;
+            }
+            // Copy the remaining elements of R[], if any
+            while (j < n2) {
+                arr[k] = R[j];
+                bars[k].style.height = `${arr[k]}%`;
+                bars[k].setAttribute('data-value', arr[k]);
+                bars[k].textContent = arr[j];
+                j++;
+                k++;
+            }
+            // Visualize the merged portion
+            for (let i = l; i <= r; i++) {
+                bars[i].classList.add('sorted');
+            }
+            await sleep(animationSpeed / 2);
+            for (let i = l; i <= r; i++) {
+                bars[i].classList.remove('sorted');
+            }
+        }
+        // Quick Sort algorithm
+        async function quickSort(arr, bars, low, high) {
+            if (low < high) {
+                // Partition the array and get the pivot index
+                const pi = await partition(arr, bars, low, high);
+                // Recursively sort elements before and after partition
+                await quickSort(arr, bars, low, pi - 1);
+                await quickSort(arr, bars, pi + 1, high);
+            }
+            // Mark as sorted when done
+            if (low === 0 && high === arr.length - 1) {
+                for (let i = 0; i < arr.length; i++) {
+                    bars[i].classList.add('sorted');
+                    await sleep(animationSpeed / 10);
+                }
+            }
+        }
+        // Partition helper function for Quick Sort
+        async function partition(arr, bars, low, high) {
+            // Choose the rightmost element as pivot
+            const pivot = arr[high];
+            // Mark the pivot
+            bars[high].classList.add('pivot');
+            await sleep(animationSpeed * 2);
+            // Index of smaller element
+            let i = low - 1;
+            for (let j = low; j < high; j++) {
+                // If current element is smaller than the pivot
+                await compareElements(bars, j, high);
+                if (arr[j] < pivot) {
+                    i++;
+                    await swapElements(arr, bars, i, j);
+                }
+            }
+            // Swap the pivot element with the element at i+1
+            await swapElements(arr, bars, i + 1, high);
+            // Remove pivot marking
+            bars[i + 1].classList.remove('pivot');
+            // Return the partition index
+            return i + 1;
+        }
+        // Heap Sort algorithm
+        async function heapSort(arr, bars) {
+            const n = arr.length;
+            // Build max heap
+            for (let i = Math.floor(n / 2) - 1; i >= 0; i--) {
+                await heapify(arr, bars, n, i);
+            }
+            // Extract elements from heap one by one
+            for (let i = n - 1; i > 0; i--) {
+                // Move current root to end
+                await swapElements(arr, bars, 0, i);
+                // Mark the sorted element
+                bars[i].classList.add('sorted');
+                // Call max heapify on the reduced heap
+                await heapify(arr, bars, i, 0);
+            }
+            // Mark the last element as sorted
+            bars[0].classList.add('sorted');
+        }
+        // Heapify helper function for Heap Sort
+        async function heapify(arr, bars, n, i) {
+            let largest = i; // Initialize largest as root
+            const left = 2 * i + 1;
+            const right = 2 * i + 2;
+            // If left child is larger than root
+            if (left < n) {
+                await compareElements(bars, largest, left);
+                if (arr[left] > arr[largest]) {
+                    largest = left;
+                }
+            }
+            // If right child is larger than largest so far
+            if (right < n) {
+                await compareElements(bars, largest, right);
+                if (arr[right] > arr[largest]) {
+                    largest = right;
+                }
+            }
+            // If largest is not root
+            if (largest !== i) {
+                await swapElements(arr, bars, i, largest);
+                // Recursively heapify the affected sub-tree
+                await heapify(arr, bars, n, largest);
+            }
+        }
+        // Event Listeners
+        startBtn.addEventListener('click', visualizeSort);
+        resetBtn.addEventListener('click', resetArray);
+        randomizeBtn.addEventListener('click', randomizeArray);
+        arraySizeSlider.addEventListener('input', changeArraySize);
+        speedSlider.addEventListener('input', changeSpeed);
+        algorithmSelect.addEventListener('change', changeAlgorithm);
+        // Algorithm card click events
+        algorithmCards.forEach(card => {
+            card.addEventListener('click', () => {
+                const algo = card.getAttribute('data-algorithm');
+                algorithmSelect.value = algo;
+                algorithm = algo;
+                updateAlgorithmInfo();
+            });
+        });
+        // Initialize the app
+        initArray();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=1bo/sort-animal" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>