Putter Bilder Identifizieren 2

by Sebastian Kay

HTML

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://js.puter.com/v2/"></script>

<nav class="navbar navbar-expand-sm fixed-top bg-body-tertiary">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto d-flex align-items-center">
        <li class="nav-item">
          <a class="nav-link btn active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
      <span class="navbar-text">
        Eingeloggt als 
      </span>
    </div>
    </div>
  </nav>

<div class="container">
  <div class="row mt-3 mb-3">
    <div class="col mb-3">
      <div class="form-floating">
        <textarea
          class="form-control"
          placeholder="Leave a comment here"
          id="textinput"
          style="height: 100px"
        ></textarea>
        <label for="textinput">Text2Speech</label>
      </div>
      <div class="col mt-3">
        <img id="base64image" class="img-thumbnail" />
      </div>

      <div class="col mt-3">
        <button id="runstoneidentify" class="btn btn-primary disabled">
          Stein identifizieren
        </button>
      </div>
      <div class="col mt-3">
        <h3>Antwort:</h3>
        <p id="imageresponse"></p>
      </div>
    </div>
  </div>
</div>

CSS

body div.container {
  margin-top: 80px;
}

JavaScript

;(() => {
  "use strict"

  const runStoneIdentify = document.getElementById("runstoneidentify")
  const textInput = document.getElementById("textinput")
  const base64Image = document.getElementById("base64image")
  const imageResponse = document.getElementById("imageresponse")
  let base64String
  let userInfos

  window.addEventListener("DOMContentLoaded", () => {
    document.documentElement.setAttribute("data-bs-theme", "dark")
  })
  if (puter.auth.isSignedIn()) {
    puter.auth.getUser().then((user) => {
            userInfos = JSON.stringify(user)
            userInfos = JSON.parse(userInfos)
            console.log(userInfos.username)
        });
  }
  else alert("Bitte einloggen")

  async function getImageAsBase64(url) {
    try {
      const response = await fetch(url)
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const blob = await response.blob()
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onloadend = () => resolve(reader.result)
        reader.onerror = reject
        reader.readAsDataURL(blob)
      })
    } catch (error) {
      console.error("Error fetching or converting image:", error)
      throw error
    }
  }

  const imageUrl = "https://i.imgur.com/ts0bSpP.png"
  getImageAsBase64(imageUrl)
    .then((base64String) => {
      textInput.value = base64String
      base64Image.src = base64String
      runStoneIdentify.classList.remove("disabled")
    })
    .catch((error) => {
      console.error("Error:", error)
    })

  runStoneIdentify.addEventListener("click", () => {
    // Loading ...
    imageResponse.textContent = "Loading..."

    try {
      // Chat with GPT-4 Vision
      puter.ai
        .chat(
          "Was ist das für ein Stein/Mineral wie im Foto zu sehen?",
          base64String,
        )
        .then((response) => {
         ...