Hugging Face's logo

Spaces:
raayraay
/
turing-machine
Running

App Files Community
raayraay commited on
Commit
a87249a
·
verified ·
1 Parent(s): fcf755e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +632 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Turing Machine
3
- emoji: 🏃
4
- colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: turing-machine
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,632 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Turing Machine Visual Guide</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .tape-cell {
11
+ width: 60px;
12
+ height: 60px;
13
+ border: 2px solid #94a3b8;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ position: relative;
18
+ font-size: 1.25rem;
19
+ background-color: white;
20
+ transition: all 0.3s ease;
21
+ }
22
+ .head-pointer {
23
+ position: absolute;
24
+ top: -30px;
25
+ left: 50%;
26
+ transform: translateX(-50%);
27
+ color: #3b82f6;
28
+ font-weight: bold;
29
+ font-size: 1.5rem;
30
+ }
31
+ .current-cell {
32
+ background-color: #bfdbfe;
33
+ transform: scale(1.1);
34
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
35
+ z-index: 10;
36
+ }
37
+ .transition-table {
38
+ border-collapse: collapse;
39
+ width: 100%;
40
+ }
41
+ .transition-table th, .transition-table td {
42
+ border: 1px solid #cbd5e1;
43
+ padding: 10px;
44
+ text-align: center;
45
+ }
46
+ .transition-table th {
47
+ background-color: #f1f5f9;
48
+ font-weight: 600;
49
+ }
50
+ .state-circle {
51
+ width: 80px;
52
+ height: 80px;
53
+ border-radius: 50%;
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ font-weight: bold;
58
+ font-size: 1.25rem;
59
+ position: relative;
60
+ }
61
+ .initial-state {
62
+ border: 3px solid #10b981;
63
+ }
64
+ .final-state {
65
+ border: 3px double #ef4444;
66
+ }
67
+ .regular-state {
68
+ border: 3px solid #3b82f6;
69
+ }
70
+ .state-label {
71
+ position: absolute;
72
+ top: -25px;
73
+ left: 50%;
74
+ transform: translateX(-50%);
75
+ font-size: 0.9rem;
76
+ color: #334155;
77
+ }
78
+ .state-arrow {
79
+ position: absolute;
80
+ top: 50%;
81
+ transform: translateY(-50%);
82
+ font-size: 1.5rem;
83
+ color: #64748b;
84
+ }
85
+ .highlight {
86
+ animation: highlight 1.5s ease;
87
+ }
88
+ @keyframes highlight {
89
+ 0% { background-color: #fef08a; }
90
+ 100% { background-color: white; }
91
+ }
92
+ .slide-in {
93
+ animation: slideIn 0.5s ease-out;
94
+ }
95
+ @keyframes slideIn {
96
+ from { transform: translateY(20px); opacity: 0; }
97
+ to { transform: translateY(0); opacity: 1; }
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="bg-slate-50 min-h-screen">
102
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
103
+ <header class="mb-8 text-center">
104
+ <h1 class="text-4xl font-bold text-blue-700 mb-2">Turing Machine Visual Guide</h1>
105
+ <p class="text-lg text-slate-600">Interactive visualization of Turing Machine components and operation</p>
106
+ </header>
107
+
108
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
109
+ <div class="p-4 bg-blue-700 text-white">
110
+ <h2 class="text-xl font-semibold">Formal Definition of a Turing Machine</h2>
111
+ </div>
112
+ <div class="p-6">
113
+ <div class="bg-blue-50 p-4 rounded-lg mb-6">
114
+ <p class="font-mono text-lg text-center font-bold">M = (Q, Σ, Γ, δ, q₀, ␣, F)</p>
115
+ </div>
116
+
117
+ <div class="grid md:grid-cols-3 gap-4 mb-6">
118
+ <div class="bg-white p-4 rounded-lg shadow border border-slate-200 slide-in">
119
+ <h4 class="font-semibold text-blue-600 mb-2 flex items-center">
120
+ <i class="fas fa-sitemap mr-2"></i> Q
121
+ </h4>
122
+ <p class="text-slate-700">Finite set of states (control unit states)</p>
123
+ <div class="mt-3 flex justify-center">
124
+ <div class="state-circle initial-state">
125
+ <span class="state-label">q₀</span>
126
+ q₀
127
+ </div>
128
+ <div class="state-arrow">→</div>
129
+ <div class="state-circle regular-state">
130
+ q₁
131
+ </div>
132
+ <div class="state-arrow">→</div>
133
+ <div class="state-circle final-state">
134
+ <span class="state-label">qf</span>
135
+ qf
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="bg-white p-4 rounded-lg shadow border border-slate-200 slide-in" style="animation-delay: 0.1s;">
141
+ <h4 class="font-semibold text-blue-600 mb-2 flex items-center">
142
+ <i class="fas fa-keyboard mr-2"></i> Σ, Γ
143
+ </h4>
144
+ <p class="text-slate-700 mb-1">Σ: Input alphabet (e.g., {0, 1})</p>
145
+ <p class="text-slate-700">Γ: Tape alphabet (Σ ⊆ Γ - {␣})</p>
146
+ <div class="mt-3 flex justify-center">
147
+ <div class="flex space-x-2">
148
+ <div class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center">0</div>
149
+ <div class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center">1</div>
150
+ <div class="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center">␣</div>
151
+ <div class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center">X</div>
152
+ <div class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center">Y</div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="bg-white p-4 rounded-lg shadow border border-slate-200 slide-in" style="animation-delay: 0.2s;">
158
+ <h4 class="font-semibold text-blue-600 mb-2 flex items-center">
159
+ <i class="fas fa-exchange-alt mr-2"></i> δ
160
+ </h4>
161
+ <p class="text-slate-700">Transition function:</p>
162
+ <p class="font-mono text-sm">Q × Γ → Q × Γ × {L, R}</p>
163
+ <div class="mt-3 bg-slate-50 p-2 rounded">
164
+ <p class="text-sm font-mono">δ(q0, 0) = (q1, 1, R)</p>
165
+ <p class="text-xs text-slate-500">If in q0 reading 0, go to q1, write 1, move right</p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <div class="grid md:grid-cols-3 gap-4">
171
+ <div class="bg-white p-4 rounded-lg shadow border border-slate-200 slide-in" style="animation-delay: 0.3s;">
172
+ <h4 class="font-semibold text-blue-600 mb-2 flex items-center">
173
+ <i class="fas fa-flag mr-2"></i> q₀
174
+ </h4>
175
+ <p class="text-slate-700">Initial state where computation begins</p>
176
+ </div>
177
+
178
+ <div class="bg-white p-4 rounded-lg shadow border border-slate-200 slide-in" style="animation-delay: 0.4s;">
179
+ <h4 class="font-semibold text-blue-600 mb-2 flex items-center">
180
+ <i class="fas fa-square mr-2"></i> ␣
181
+ </h4>
182
+ <p class="text-slate-700">Blank symbol (not in Σ, part of Γ)</p>
183
+ </div>
184
+
185
+ <div class="bg-white p-4 rounded-lg shadow border border-slate-200 slide-in" style="animation-delay: 0.5s;">
186
+ <h4 class="font-semibold text-blue-600 mb-2 flex items-center">
187
+ <i class="fas fa-check-circle mr-2"></i> F
188
+ </h4>
189
+ <p class="text-slate-700">Set of final/accepting states (F ⊆ Q)</p>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
196
+ <div class="p-4 bg-blue-700 text-white">
197
+ <h2 class="text-xl font-semibold">Turing Machine Operation</h2>
198
+ </div>
199
+ <div class="p-6">
200
+ <div class="mb-6">
201
+ <h3 class="text-lg font-semibold text-slate-800 mb-3">Tape Visualization</h3>
202
+ <div class="flex justify-center mb-4">
203
+ <div id="tape-container" class="flex items-center"></div>
204
+ </div>
205
+ <div class="text-center mb-4">
206
+ <span class="font-semibold text-blue-600">Current State:</span>
207
+ <span id="current-state" class="font-mono bg-blue-100 px-3 py-1 rounded-md ml-2">q₀</span>
208
+ </div>
209
+ <div class="text-center mb-4">
210
+ <span class="font-semibold text-slate-700">Instantaneous Description:</span>
211
+ <span id="instantaneous-desc" class="font-mono bg-slate-100 px-3 py-1 rounded-md ml-2">q₀ 0 1 0</span>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="mb-6">
216
+ <h3 class="text-lg font-semibold text-slate-800 mb-3">Control Panel</h3>
217
+ <div class="flex flex-wrap justify-center gap-3 mb-4">
218
+ <button id="run-btn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center">
219
+ <i class="fas fa-play mr-2"></i> Run
220
+ </button>
221
+ <button id="step-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center">
222
+ <i class="fas fa-step-forward mr-2"></i> Step
223
+ </button>
224
+ <button id="reset-btn" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition flex items-center">
225
+ <i class="fas fa-redo mr-2"></i> Reset
226
+ </button>
227
+ <button id="slow-btn" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition flex items-center">
228
+ <i class="fas fa-tachometer-alt mr-2"></i> Slow Motion
229
+ </button>
230
+ </div>
231
+
232
+ <div class="flex flex-wrap justify-center gap-4">
233
+ <div>
234
+ <label for="input-string" class="block text-sm font-medium text-slate-700 mb-1">Input String</label>
235
+ <input type="text" id="input-string" class="px-3 py-2 border border-slate-300 rounded-md shadow-sm" value="010">
236
+ </div>
237
+ <div>
238
+ <label for="speed-slider" class="block text-sm font-medium text-slate-700 mb-1">Speed</label>
239
+ <input type="range" id="speed-slider" min="100" max="2000" value="500" class="w-32">
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <div>
245
+ <h3 class="text-lg font-semibold text-slate-800 mb-3">Transition Table</h3>
246
+ <div class="overflow-x-auto">
247
+ <table class="transition-table" id="transition-table">
248
+ <thead>
249
+ <tr>
250
+ <th>Current State</th>
251
+ <th>Read Symbol</th>
252
+ <th>New State</th>
253
+ <th>Write Symbol</th>
254
+ <th>Move</th>
255
+ </tr>
256
+ </thead>
257
+ <tbody>
258
+ <!-- Will be populated by JavaScript -->
259
+ </tbody>
260
+ </table>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
267
+ <div class="p-4 bg-blue-700 text-white">
268
+ <h2 class="text-xl font-semibold">Step-by-Step Operation</h2>
269
+ </div>
270
+ <div class="p-6">
271
+ <div class="grid md:grid-cols-2 gap-6">
272
+ <div>
273
+ <div class="flex items-start mb-4 p-3 bg-blue-50 rounded-lg">
274
+ <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</div>
275
+ <div>
276
+ <h4 class="font-semibold text-blue-700 mb-1">Initialization</h4>
277
+ <p class="text-slate-700">The machine starts in state q₀ with the input string on the tape, surrounded by blanks (␣). The head is positioned at the leftmost input symbol.</p>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="flex items-start mb-4 p-3 bg-blue-50 rounded-lg">
282
+ <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</div>
283
+ <div>
284
+ <h4 class="font-semibold text-blue-700 mb-1">Read Symbol</h4>
285
+ <p class="text-slate-700">The head reads the symbol at its current position. This symbol and the current state determine the next action.</p>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="flex items-start mb-4 p-3 bg-blue-50 rounded-lg">
290
+ <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</div>
291
+ <div>
292
+ <h4 class="font-semibold text-blue-700 mb-1">Transition</h4>
293
+ <p class="text-slate-700">The control unit consults δ (transition function) to determine: new state, symbol to write, and head movement direction.</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <div>
299
+ <div class="flex items-start mb-4 p-3 bg-blue-50 rounded-lg">
300
+ <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">4</div>
301
+ <div>
302
+ <h4 class="font-semibold text-blue-700 mb-1">Write & Move</h4>
303
+ <p class="text-slate-700">The head writes the new symbol at its current position, then moves left (L) or right (R) one cell.</p>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="flex items-start mb-4 p-3 bg-blue-50 rounded-lg">
308
+ <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">5</div>
309
+ <div>
310
+ <h4 class="font-semibold text-blue-700 mb-1">Repeat</h4>
311
+ <p class="text-slate-700">Steps 2-4 repeat until no transition is defined for the current state and symbol (halt).</p>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="flex items-start mb-4 p-3 bg-blue-50 rounded-lg">
316
+ <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">6</div>
317
+ <div>
318
+ <h4 class="font-semibold text-blue-700 mb-1">Accept/Reject</h4>
319
+ <p class="text-slate-700">If halted in a final state (F), the input is accepted. Otherwise, it's rejected (either by halting in non-final state or infinite loop).</p>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="bg-slate-50 p-4 rounded-lg border border-slate-200">
326
+ <h4 class="font-semibold text-slate-800 mb-2">Instantaneous Description Example</h4>
327
+ <p class="text-slate-700 mb-2">The configuration of a TM at any point can be represented as: <span class="font-mono">α q β</span></p>
328
+ <ul class="list-disc pl-5 text-slate-700 space-y-1">
329
+ <li><span class="font-mono">α</span>: Tape contents to the left of the head</li>
330
+ <li><span class="font-mono">q</span>: Current state</li>
331
+ <li><span class="font-mono">β</span>: Tape contents at and to the right of the head</li>
332
+ </ul>
333
+ <div class="mt-3 font-mono bg-white p-3 rounded border border-slate-200">
334
+ <p>Initial: <span class="text-blue-600">q₀</span> 0 1 0 ␣</p>
335
+ <p>After 1st transition: 1 <span class="text-blue-600">q₁</span> 1 0 ␣</p>
336
+ <p>After 2nd transition: 1 0 <span class="text-blue-600">q₁</span> 0 ␣</p>
337
+ <p>Final: 1 0 1 <span class="text-red-600">qf</span> ␣ (Accepted)</p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <footer class="text-center text-slate-600 text-sm">
344
+ <p>Interactive Turing Machine visualization for educational purposes. Use the simulator to explore how each component works together.</p>
345
+ </footer>
346
+ </div>
347
+
348
+ <script>
349
+ // Turing Machine definition for the simulator
350
+ const exampleTM = {
351
+ name: "Simple 0/1 Flipper",
352
+ states: ['q0', 'q1', 'qf'],
353
+ inputAlphabet: ['0', '1'],
354
+ tapeAlphabet: ['0', '1', '␣'],
355
+ initialState: 'q0',
356
+ blankSymbol: '␣',
357
+ finalStates: ['qf'],
358
+ transitions: [
359
+ {currentState: 'q0', readSymbol: '0', newState: 'q1', writeSymbol: '1', move: 'R'},
360
+ {currentState: 'q0', readSymbol: '1', newState: 'q1', writeSymbol: '0', move: 'R'},
361
+ {currentState: 'q1', readSymbol: '0', newState: 'q1', writeSymbol: '1', move: 'R'},
362
+ {currentState: 'q1', readSymbol: '1', newState: 'q1', writeSymbol: '0', move: 'R'},
363
+ {currentState: 'q1', readSymbol: '␣', newState: 'qf', writeSymbol: '␣', move: 'R'}
364
+ ]
365
+ };
366
+
367
+ // Simulator variables
368
+ let currentConfig = null;
369
+ let headPosition = 0;
370
+ let isRunning = false;
371
+ let stepTimeout = null;
372
+ let stepSpeed = 500;
373
+ let slowMotion = false;
374
+ let history = [];
375
+
376
+ // Initialize the simulator
377
+ function initSimulator() {
378
+ // Set up transition table
379
+ updateTransitionTable();
380
+
381
+ // Reset the machine
382
+ resetTM();
383
+ }
384
+
385
+ // Update the transition table display
386
+ function updateTransitionTable() {
387
+ const tableBody = document.getElementById('transition-table').querySelector('tbody');
388
+ tableBody.innerHTML = '';
389
+
390
+ exampleTM.transitions.forEach(transition => {
391
+ const row = document.createElement('tr');
392
+ row.innerHTML = `
393
+ <td>${transition.currentState}</td>
394
+ <td>${transition.readSymbol}</td>
395
+ <td>${transition.newState}</td>
396
+ <td>${transition.writeSymbol}</td>
397
+ <td>${transition.move}</td>
398
+ `;
399
+ tableBody.appendChild(row);
400
+ });
401
+ }
402
+
403
+ // Reset the Turing Machine
404
+ function resetTM() {
405
+ const input = document.getElementById('input-string').value;
406
+
407
+ // Initialize tape with input surrounded by blanks
408
+ currentConfig = {
409
+ tape: ['␣', ...input.split(''), '␣'],
410
+ state: exampleTM.initialState,
411
+ head: 1 // Start at first input symbol
412
+ };
413
+
414
+ headPosition = 1;
415
+ history = [];
416
+ updateHistory();
417
+
418
+ // Update display
419
+ updateTapeDisplay();
420
+ document.getElementById('current-state').textContent = currentConfig.state;
421
+ document.getElementById('current-state').className = 'font-mono bg-blue-100 px-3 py-1 rounded-md ml-2';
422
+
423
+ // Clear any running execution
424
+ if (stepTimeout) {
425
+ clearTimeout(stepTimeout);
426
+ stepTimeout = null;
427
+ }
428
+ isRunning = false;
429
+ }
430
+
431
+ // Update the tape display
432
+ function updateTapeDisplay() {
433
+ const tapeContainer = document.getElementById('tape-container');
434
+ tapeContainer.innerHTML = '';
435
+
436
+ // Show cells around the head position (5 to left, 5 to right)
437
+ const start = Math.max(0, headPosition - 5);
438
+ const end = Math.min(currentConfig.tape.length, headPosition + 6);
439
+
440
+ for (let i = start; i < end; i++) {
441
+ const cell = document.createElement('div');
442
+ cell.className = 'tape-cell';
443
+ if (i === headPosition) cell.classList.add('current-cell');
444
+
445
+ // Highlight recently changed cells
446
+ if (history.some(step => step.position === i && step.step === history.length)) {
447
+ cell.classList.add('highlight');
448
+ }
449
+
450
+ const symbol = currentConfig.tape[i];
451
+ cell.textContent = symbol;
452
+
453
+ if (i === headPosition) {
454
+ const pointer = document.createElement('div');
455
+ pointer.className = 'head-pointer';
456
+ pointer.innerHTML = '<i class="fas fa-chevron-down"></i>';
457
+ cell.appendChild(pointer);
458
+ }
459
+
460
+ tapeContainer.appendChild(cell);
461
+ }
462
+
463
+ // Update instantaneous description
464
+ updateInstantaneousDesc();
465
+ }
466
+
467
+ // Update the instantaneous description
468
+ function updateInstantaneousDesc() {
469
+ let leftPart = currentConfig.tape.slice(0, headPosition).join(' ');
470
+ let rightPart = currentConfig.tape.slice(headPosition).join(' ');
471
+ let desc = `${leftPart} <span class="text-blue-600">${currentConfig.state}</span> ${rightPart}`;
472
+
473
+ document.getElementById('instantaneous-desc').innerHTML = desc;
474
+ }
475
+
476
+ // Update history of tape changes
477
+ function updateHistory() {
478
+ // Record current tape state and head position
479
+ history.push({
480
+ step: history.length + 1,
481
+ state: currentConfig.state,
482
+ tape: [...currentConfig.tape],
483
+ position: headPosition
484
+ });
485
+ }
486
+
487
+ // Execute one step of the Turing Machine
488
+ function stepTM() {
489
+ const currentSymbol = currentConfig.tape[headPosition];
490
+
491
+ // Find matching transition
492
+ const transition = exampleTM.transitions.find(t =>
493
+ t.currentState === currentConfig.state && t.readSymbol === currentSymbol
494
+ );
495
+
496
+ if (!transition) {
497
+ // No transition found - halt
498
+ isRunning = false;
499
+
500
+ // Check if we're in a final state
501
+ if (exampleTM.finalStates.includes(currentConfig.state)) {
502
+ document.getElementById('current-state').className = 'font-mono bg-green-100 px-3 py-1 rounded-md ml-2';
503
+ showAlert('Accepted! The machine halted in a final state.', 'green');
504
+ } else {
505
+ document.getElementById('current-state').className = 'font-mono bg-red-100 px-3 py-1 rounded-md ml-2';
506
+ showAlert('Rejected! The machine halted in a non-final state.', 'red');
507
+ }
508
+ return;
509
+ }
510
+
511
+ // Record previous state for animation
512
+ const prevState = currentConfig.state;
513
+ const prevSymbol = currentConfig.tape[headPosition];
514
+ const prevPos = headPosition;
515
+
516
+ // Apply the transition
517
+ currentConfig.tape[headPosition] = transition.writeSymbol;
518
+ currentConfig.state = transition.newState;
519
+
520
+ // Move the head
521
+ if (transition.move === 'L') {
522
+ headPosition--;
523
+ if (headPosition < 0) {
524
+ // Extend tape to the left
525
+ currentConfig.tape.unshift(exampleTM.blankSymbol);
526
+ headPosition = 0;
527
+ }
528
+ } else if (transition.move === 'R') {
529
+ headPosition++;
530
+ if (headPosition >= currentConfig.tape.length) {
531
+ // Extend tape to the right
532
+ currentConfig.tape.push(exampleTM.blankSymbol);
533
+ }
534
+ }
535
+
536
+ // Record this step in history
537
+ updateHistory();
538
+
539
+ // Update display
540
+ updateTapeDisplay();
541
+ document.getElementById('current-state').textContent = currentConfig.state;
542
+
543
+ // Highlight the transition in the table
544
+ highlightTransition(transition);
545
+
546
+ // Check if we're in a final state
547
+ if (exampleTM.finalStates.includes(currentConfig.state)) {
548
+ isRunning = false;
549
+ document.getElementById('current-state').className = 'font-mono bg-green-100 px-3 py-1 rounded-md ml-2';
550
+ showAlert('Accepted! The machine halted in a final state.', 'green');
551
+ return;
552
+ }
553
+
554
+ // Continue if running
555
+ if (isRunning) {
556
+ if (slowMotion) {
557
+ // In slow motion mode, pause between steps
558
+ stepTimeout = setTimeout(stepTM, stepSpeed);
559
+ } else {
560
+ // Otherwise proceed immediately to next step
561
+ stepTM();
562
+ }
563
+ }
564
+ }
565
+
566
+ // Highlight the current transition in the table
567
+ function highlightTransition(transition) {
568
+ const tableRows = document.querySelectorAll('#transition-table tbody tr');
569
+
570
+ // Remove any existing highlights
571
+ tableRows.forEach(row => {
572
+ row.classList.remove('bg-yellow-100');
573
+ });
574
+
575
+ // Find and highlight the matching transition
576
+ for (let i = 0; i < tableRows.length; i++) {
577
+ const cells = tableRows[i].querySelectorAll('td');
578
+ if (cells[0].textContent === transition.currentState &&
579
+ cells[1].textContent === transition.readSymbol) {
580
+ tableRows[i].classList.add('bg-yellow-100');
581
+ break;
582
+ }
583
+ }
584
+ }
585
+
586
+ // Show an alert message
587
+ function showAlert(message, color) {
588
+ const alertDiv = document.createElement('div');
589
+ alertDiv.className = `fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-lg text-white bg-${color}-600`;
590
+ alertDiv.textContent = message;
591
+ document.body.appendChild(alertDiv);
592
+
593
+ setTimeout(() => {
594
+ alertDiv.remove();
595
+ }, 3000);
596
+ }
597
+
598
+ // Run the Turing Machine continuously
599
+ function runTM() {
600
+ if (!isRunning) {
601
+ isRunning = true;
602
+ slowMotion = false;
603
+ stepTM();
604
+ }
605
+ }
606
+
607
+ // Run in slow motion
608
+ function runSlowMotion() {
609
+ if (!isRunning) {
610
+ isRunning = true;
611
+ slowMotion = true;
612
+ stepTM();
613
+ }
614
+ }
615
+
616
+ // Event listeners
617
+ document.getElementById('run-btn').addEventListener('click', runTM);
618
+ document.getElementById('step-btn').addEventListener('click', () => {
619
+ if (!isRunning) stepTM();
620
+ });
621
+ document.getElementById('reset-btn').addEventListener('click', resetTM);
622
+ document.getElementById('slow-btn').addEventListener('click', runSlowMotion);
623
+ document.getElementById('input-string').addEventListener('change', resetTM);
624
+ document.getElementById('speed-slider').addEventListener('input', function() {
625
+ stepSpeed = 2100 - this.value; // Invert so right is faster
626
+ });
627
+
628
+ // Initialize the simulator
629
+ initSimulator();
630
+ </script>
631
+ <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=raayraay/turing-machine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
632
+ </html>