Auto description and image generation!

src/lib/components/AdventureCard.svelte

@@ -109,6 +109,10 @@
           ><iconify-icon icon="mdi:launch" class="text-2xl"
           ></iconify-icon></button
         > -->
+        <button class="btn btn-primary" on:click={moreInfo}
+          ><iconify-icon icon="mdi:launch" class="text-2xl"
+          ></iconify-icon></button
+        >
         <button class="btn btn-primary" on:click={edit}
           ><iconify-icon icon="mdi:file-document-edit" class="text-2xl"
           ></iconify-icon></button

src/lib/components/CreateNewAdventure.svelte

@@ -16,7 +16,7 @@
   import type { Adventure } from "$lib/utils/types";
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
-  import { addActivityType } from "$lib";
+  import { addActivityType, generateDescription, getImage } from "$lib";
   let modal: HTMLDialogElement;
 
   onMount(() => {
@@ -46,6 +46,28 @@
     }
   }
 
+  async function generate() {
+    try {
+      console.log(newAdventure.name);
+      const desc = await generateDescription(newAdventure.name);
+      newAdventure.description = desc;
+      // Do something with the updated newAdventure object
+    } catch (error) {
+      console.error(error);
+      // Handle the error
+    }
+  }
+
+  async function searchImage() {
+    try {
+      const imageUrl = await getImage(newAdventure.name);
+      newAdventure.imageUrl = imageUrl;
+    } catch (error) {
+      console.error(error);
+      // Handle the error
+    }
+  }
+
   let activityInput: string = "";
 
   function activitySetup() {
@@ -102,6 +124,7 @@
             class="input input-bordered w-full max-w-xs"
           />
         </div>
+
         <div>
           <label for="date">Activity Types (Comma Seperated)</label>
           <input
@@ -140,6 +163,12 @@
         <!-- if there is a button in form, it will close the modal -->
         <button class="btn mt-4" on:click={close}>Close</button>
       </form>
+      <button class="btn btn-secondary" on:click={generate}
+        >Generate Description</button
+      >
+      <button class="btn btn-secondary" on:click={searchImage}
+        >Search for Image</button
+      >
     </div>
   </div>
 </dialog>

src/lib/components/TripCard.svelte

@@ -19,11 +19,7 @@
     dispatch("add", trip);
   }
 
-  function moreInfo() {
+  // TODO: Implement markVisited function
-    console.log(trip.id);
-    goto(`/trip/${trip.id}`);
-  }
-
   function markVisited() {
     console.log(trip.id);
     dispatch("markVisited", trip);

src/lib/index.ts

@@ -63,3 +63,64 @@ export function addActivityType(
   }
   return adventureToEdit;
 }
+
+/**
+ * Generates a description for an adventure using the adventure title.
+ * @param adventureTitle - The title of the adventure.
+ * @returns A Promise that resolves to the description of the adventure.
+ */
+export async function generateDescription(adventureTitle: string) {
+  const url = `https://en.wikipedia.org/w/api.php?origin=*&action=query&prop=extracts&exintro&explaintext&format=json&titles=${encodeURIComponent(
+    adventureTitle
+  )}`;
+
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+
+    // Check if the query was successful
+    if (data.query && data.query.pages) {
+      const pageId = Object.keys(data.query.pages)[0];
+      const page = data.query.pages[pageId];
+
+      // Check if the page exists
+      if (page.extract) {
+        return page.extract;
+      } else {
+        return `No Wikipedia article found for "${adventureTitle}".`;
+      }
+    } else {
+      return `Error: ${data.error.info}`;
+    }
+  } catch (error) {
+    console.error("Error fetching Wikipedia data:", error);
+    return `Error fetching Wikipedia data for "${adventureTitle}".`;
+  }
+}
+
+export async function getImage(adventureTitle: string) {
+  const url = `https://en.wikipedia.org/w/api.php?origin=*&action=query&prop=pageimages&format=json&piprop=original&titles=${adventureTitle}`;
+
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+
+    // Check if the query was successful
+    if (data.query && data.query.pages) {
+      const pageId = Object.keys(data.query.pages)[0];
+      const page = data.query.pages[pageId];
+
+      // Check if the page has an image
+      if (page.original && page.original.source) {
+        return page.original.source;
+      } else {
+        return `No image found for "${adventureTitle}".`;
+      }
+    } else {
+      return `Error: ${data.error.info}`;
+    }
+  } catch (error) {
+    console.error("Error fetching Wikipedia data:", error);
+    return `Error fetching Wikipedia data for "${adventureTitle}".`;
+  }
+}

src/routes/planner/+page.svelte

@@ -271,7 +271,7 @@
 {#if tripPlans.length !== 0}
   <div class="flex justify-center items-center w-full mt-4 mb-4">
     <article class="prose">
-      <h1 class="text-center">My Trip Plans</h1>
+      <h1 class="text-center">My Trip Ideas</h1>
     </article>
   </div>
 {/if}