client/src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ImageInput from "./ImageInput";
 import ImageOutput from "./ImageOutput";
-import Ditherer from "./Ditherer";
+import Ditherer from "./lib/Ditherer";
 import ImagePreview from "./ImagePreview";
 import Header from "./Header";
 
@@ -19,9 +19,15 @@ function App() {
   const handleImageSubmit = async (data: Uint8ClampedArray) => {
     setBaseImage(data);
     setAppState(AppState.IMAGE_LOADED);
-    const ditheredImage = await new Ditherer().dither(data);
-    setDitheredImage(ditheredImage);
-    setAppState(AppState.IMAGE_PROCESSED);
+
+    try {
+      const ditheredImage = await new Ditherer().dither(data);
+      setDitheredImage(ditheredImage);
+      setAppState(AppState.IMAGE_PROCESSED);
+    } catch (e) {
+      console.error(e);
+      window.alert("Something went wrong. Please try again.");
+    }
   };
 
   return (

client/src/Header.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 function Header() {
   return (
-    <header className="bg-nord-1 text-nord-5 py-3 px-2">
+    <header className="flex items-center bg-nord-1 text-nord-5 py-3 px-2">
       <a href="https://github.com/CrispyBaguette/wasm-palette-converter">
         <FontAwesomeIcon
           icon={faGithub}
@@ -17,6 +17,18 @@ function Header() {
           className="fa-2x hover:text-nord-7 mx-2"
         />
       </a>
+      <span className="text-sm">
+        Powered by{" "}
+        <a
+          href="https://ipfs.io"
+          target="_blank"
+          rel="noreferrer"
+          className="bg-nord-5 text-nord-1 hover:bg-nord-7 px-1 "
+        >
+          IPFS
+        </a>
+        . Visit using your own node !
+      </span>
     </header>
   );
 }