From 822346c838dc17834cac85708bc388cdd8a9cb07 Mon Sep 17 00:00:00 2001
From: human-bee <130510994+human-bee@users.noreply.github.com>
Date: Wed, 28 Aug 2024 22:01:15 -0700
Subject: [PATCH] Updated image formatting in esp32.md

---
 docs/hardware/01-light/esp32/esp32.md  |  84 ++++++++++++++++++
 docs/hardware/01-light/esp32/esp32.mdx | 113 ++-----------------------
 2 files changed, 91 insertions(+), 106 deletions(-)
 create mode 100644 docs/hardware/01-light/esp32/esp32.md

diff --git a/docs/hardware/01-light/esp32/esp32.md b/docs/hardware/01-light/esp32/esp32.md
new file mode 100644
index 0000000..75543e8
--- /dev/null
+++ b/docs/hardware/01-light/esp32/esp32.md
@@ -0,0 +1,84 @@
+---
+title: "ESP32"
+description: "How to setup the ESP32"
+---
+
+To set up the ESP32 for use with 01, follow this guide to install the firmware:
+
+1. Download [Arduino IDE](https://www.arduino.cc/en/software).
+
+2. Get the firmware by copying the contents of [client.ino](https://github.com/OpenInterpreter/01/blob/main/software/source/clients/esp32/src/client/client.ino) from the 01 repository.
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/copy-client.png" alt="Copy client.ino contents" width="60%" />
+</div>
+
+3. Open Arduino IDE and paste the client.ino contents.
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/paste-client.png" alt="Paste client.ino contents" width="60%" />
+
+  <img src="assets/pasted-client.png" alt="Pasted client.ino contents" width="60%" />
+</div>
+
+4. Go to Tools -> Board -> Boards Manager, search "esp32", then install the boards by Arduino and Espressif.
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/boards-manager.png" alt="Install ESP32 boards" width="60%" />
+</div>
+
+5. Go to Tools -> Manage Libraries, then install the following:
+
+- M5Atom by M5Stack ([Reference](https://www.arduino.cc/reference/en/libraries/m5atom/))
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/M5-atom-library.png" alt="Install M5Atom library" width="60%" />
+
+  <img src="assets/m5-atom-install-all.png" alt="Install all M5Atom dependencies" width="60%" />
+</div>
+
+- WebSockets by Markus Sattler ([Reference](https://www.arduino.cc/reference/en/libraries/websockets/))
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/WebSockets by Markus Sattler.png" alt="Install WebSockets library" width="60%" />
+</div>
+
+- AsyncTCP by dvarrel ([Reference](https://github.com/dvarrel/AsyncTCP))
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/AsyncTCP by dvarrel.png" alt="Install AsyncTCP library" width="60%" />
+</div>
+
+- ESPAsyncWebServer by lacamera ([Reference](https://github.com/lacamera/ESPAsyncWebServer))
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/ESPAsyncWebServer by lacamera.png" alt="Install ESPAsyncWebServer library" width="60%" />
+
+  <img src="assets/ESPAsyncWebServer-install-all.png" alt="Install all ESPAsyncWebServer dependencies" width="60%" />
+</div>
+
+6. To flash the .ino to the board, connect the board to the USB port.
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/connect-usb.jpeg" alt="Connect USB" width="60%" />
+</div>
+
+7. Select the port from the dropdown on the IDE, then select the M5Atom board (or M5Stack-ATOM if you have that).
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/Select Board and Port.png" alt="Select Board and Port" width="60%" />
+</div>
+
+8. Click on upload to flash the board.
+
+<div style="display: flex; justify-content: center;">
+  <img src="assets/Upload.png" alt="Upload firmware" width="60%" />
+</div>
+
+
+
+---
+
+Watch this video from Thomas for a step-by-step guide on flashing the ESP32 and connecting the 01.
+
+[![ESP32 Flashing Tutorial](https://img.youtube.com/vi/Y76zed8nEE8/0.jpg)](https://www.youtube.com/watch?v=Y76zed8nEE8 "ESP32 Flashing Tutorial")
diff --git a/docs/hardware/01-light/esp32/esp32.mdx b/docs/hardware/01-light/esp32/esp32.mdx
index bb7a358..6a3c091 100644
--- a/docs/hardware/01-light/esp32/esp32.mdx
+++ b/docs/hardware/01-light/esp32/esp32.mdx
@@ -6,118 +6,19 @@ description: "How to setup the ESP32"
 To set up the ESP32 for use with 01, follow this guide to install the firmware:
 
 1. Download [Arduino IDE](https://www.arduino.cc/en/software).
-
 2. Get the firmware by copying the contents of [client.ino](https://github.com/OpenInterpreter/01/blob/main/software/source/clients/esp32/src/client/client.ino) from the 01 repository.
-
-<Image
-  src="assets/copy-client.png"
-  alt="Copy client.ino contents"
-  width="60%"
-  style={{ display: 'block', margin: '0 auto' }}
-/>
-
 3. Open Arduino IDE and paste the client.ino contents.
-
-<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-  <Image
-    src="assets/paste-client.png"
-    alt="Paste client.ino contents"
-    width="45%"
-    style={{ marginRight: '10px' }}
-  />
-  <Image
-    src="assets/pasted-client.png"
-    alt="Pasted client.ino contents"
-    width="45%"
-    style={{ marginLeft: '10px' }}
-  />
-</div>
-
 4. Go to Tools -> Board -> Boards Manager, search "esp32", then install the boards by Arduino and Espressif.
-
-<Image
-  src="assets/boards-manager.png"
-  alt="Install ESP32 boards"
-  width="60%"
-  style={{ display: 'block', margin: '0 auto' }}
-/>
-
 5. Go to Tools -> Manage Libraries, then install the following:
 
-- M5Atom by M5Stack ([Reference](https://www.arduino.cc/reference/en/libraries/m5atom/))
-<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-  <Image
-    src="assets/M5-atom-library.png"
-    alt="Install M5Atom library"
-    width="45%"
-    style={{ marginRight: '10px' }}
-  />
-  <Image
-    src="assets/m5-atom-install-all.png"
-    alt="Install all M5Atom dependencies"
-    width="45%"
-    style={{ marginLeft: '10px' }}
-  />
-</div>
-
-- WebSockets by Markus Sattler ([Reference](https://www.arduino.cc/reference/en/libraries/websockets/))
-<Image
-  src="assets/WebSockets by Markus Sattler.png"
-  alt="Install WebSockets library"
-  width="60%"
-  style={{ display: 'block', margin: '0 auto' }}
-/>
-
-- AsyncTCP by dvarrel ([Reference](https://github.com/dvarrel/AsyncTCP))
-<Image
-  src="assets/AsyncTCP by dvarrel.png"
-  alt="Install AsyncTCP library"
-  width="60%"
-  style={{ display: 'block', margin: '0 auto' }}
-/>
-
-- ESPAsyncWebServer by lacamera ([Reference](https://github.com/lacamera/ESPAsyncWebServer))
-<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-  <Image
-    src="assets/ESPAsyncWebServer by lacamera.png"
-    alt="Install ESPAsyncWebServer library"
-    width="45%"
-    style={{ marginRight: '10px' }}
-  />
-  <Image
-    src="assets/ESPAsyncWebServer-install-all.png"
-    alt="Install all ESPAsyncWebServer dependencies"
-    width="45%"
-    style={{ marginLeft: '10px' }}
-  />
-</div>
-
-6. To flash the .ino to the board, connect the board to the USB port.
-
-<Image
-  src="assets/connect-usb.jpeg"
-  alt="Connect USB"
-  width="60%"
-  style={{ display: 'block', margin: '0 auto' }}
-/>
-
-7. Select the port from the dropdown on the IDE, then select the M5Atom board (or M5Stack-ATOM if you have that).
-
-<Image
-  src="assets/Select Board and Port.png"
-  alt="Select Board and Port"
-  width="60%"
-  style={{ display: 'block', margin: '0 auto' }}
-/>
+- M5Atom by M5Stack [Reference](https://www.arduino.cc/reference/en/libraries/m5atom/)
+- WebSockets by Markus Sattler [Reference](https://www.arduino.cc/reference/en/libraries/websockets/)
+- AsyncTCP by dvarrel [Reference](https://github.com/dvarrel/AsyncTCP)
+- ESPAsyncWebServer by lacamera [Reference](https://github.com/lacamera/ESPAsyncWebServer)
 
-8. Click on upload to flash the board.
+6. To flash the .ino to the board, connect the board to the USB port, select the port from the dropdown on the IDE, then select the M5Atom board (or M5Stack-ATOM if you have that). Click on upload to flash the board.
 
-<Image
-  src="assets/Upload.png"
-  alt="Upload firmware"
-  width="60%"
-  style={{ display: 'block', margin: '0 auto' }}
-/>
+Watch this video from Thomas for a step-by-step guide on flashing the ESP32 and connecting the 01.
 
 <iframe
   width="560"
@@ -126,4 +27,4 @@ To set up the ESP32 for use with 01, follow this guide to install the firmware:
   frameBorder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen
-></iframe>
+></iframe>
\ No newline at end of file