Wie React Icons ausfüllen / Alternative?

In meiner React Component (siehe unten) ist leider das Icon ArrowUpCircleSharp von "react-icons" innen unausgefüllt was nicht schön aussieht wenn es sich über Text und Bilder bewegt, andere Icons wie von FontAwesome Material Icons haben das gleiche Problem. Ich habe es versucht mit den Props Stroke, Fill und mit CSS background, ändert aber nur das Schwarze außen und nicht innerhalb vom Icon.
Was kann ich tun ? Will jetzt nicht umbedingt eine ganze Library einbinden für das Icon, bei react-icons hab ich den Vorteil das es nur die benutzen auch wirklich nutzt,

Bild zum Beitrag

'use client';
import { useEffect, useState } from "react";
import "../.././assets/styles/components/ScrollToTop/ScrollToTop.scss";
import { IoArrowUpCircleSharp} from "react-icons/io5";


export const ScrollToTop = () => {

const [ScrollY,setScrollY] = useState<number>(0);

useEffect(() => {
    window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))

    return () => {
        window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))
    }
}, [ScrollY])

    return(

        <div
            onClick={()=>{ScrollY > 100 ?
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : 0})
            :
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : document.body.scrollHeight});
            }}
        className={`ScrollToTop ${ScrollY > 100 ? " ScrollToTop_Up" : "ScrollToTop_Down"}`}>
                <IoArrowUpCircleSharp/>
        </div>
    )
}

14.07.2024, 11:50

Mein SCSS: @import "../../globals/_css-resets.scss";
@import "../../globals/_mixins.scss";
@import "../../globals/_variables.scss";
@import "../../globals/_media-queries.scss";
@import "../../globals/_font-face";

.ScrollToTop{
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    z-index: 1000;
    cursor: pointer;
    color: #000;
    font-size: 56px;
    @media screen and (max-width : $Mobile_Breakpoint_L) {

    }
    &::before{
  /*top left content usw.*/
  @include pseudo_positionieren();
        background-color: red;
        border-radius: 100%;
        aspect-ratio: 1/1;
    }
}

.ScrollToTop_Up{
    svg{
        rotate: 0deg;
        transition: all .5s;
    }
}
.ScrollToTop_Down{
    svg{
        rotate: -180deg;
        transition: all .5s;
    }
}

2 Antworten

timlg07

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

14.07.2024, 11:33

Ich denke die schnellste Lösung in diesem Fall wäre einfach einen weißen Kreis hinter das Icon zu legen. Dafür könntest du ggf. ein Pseudo-Element (::before / ::after) verwenden, oder einfach ein div, das du um das <IoArrowUpCircleSharp> wrappst.

Mit `aspect-ratio: 1` oder für ältere Browser auch `padding-bottom: 100%` ist das quadratisch und mit `border-radius: 50%` ein schöner runder Kreis. Background-color geben, hinter dem Icon platzieren (falls du ein Pseudo-Element verwendest, ansonsten passt das eh schon) und dann sollte das klappen :)

Woher ich das weiß:Berufserfahrung

johndont

Beitragsersteller

14.07.2024, 11:36

Danke aber das hatte ich schon versucht hat leider nicht so geklappt, man sieht den gleichen Effekt wie wenn ich sage

border: 3px solid white;

Innen ist es weiß aber da wo das schwarze ist bekommt außen nochmal weißen Rand.

timlg07

14.07.2024, 11:39

@johndont

Weil das Icon nicht den kompletten Container ausfüllt, also quasi nicht alles überdeckt?

johndont

Beitragsersteller

14.07.2024, 11:53

@timlg07

Das ist mit den Dev Tools zu sehen, kenne mich leider garnicht aus mit SVG Grafiken und wie man diese Editieren kann.

<div class="ScrollToTop ScrollToTop_Up"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm80.09 224L272 208.42V358h-32V208.42L175.91 272l-22.54-22.7L256 147.46 358.63 249.3z"></path></svg></div>

Das mit der Border habe ich gerade nachträglich in die Frage ergänzt, vielleicht kannst du es bei dir Nachstellen und was erkennen. Und dazu habe ich ein Bild ergänzt.
Ich weiß ehrlich nicht was da fehlt

iQa1x

14.07.2024, 11:54

Hindert dich was daran, den Pfeil einfach selbst einzufügen?

<svg xmlns="http://www.w3.org/2000/svg" style="width:1em" viewbox="0 0 5 5">
  <circle
     style="fill:#000000;fill-opacity:0.979592;stroke:#000000;stroke-width:0.0360134"
     id="path231"
     cx="2.5"
     cy="2.5"
     r="2.4819932" />
  <path
     style="fill:#ffffff;stroke:#000000;stroke-width:0.0362033px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="M 1.5549134,2.3235735 2.3382928,3.0793488 2.3251167,1.2888531 2.6868601,1.2983891 2.7036294,3.0698122 3.4594588,2.3140371 3.7385519,2.5882142 2.5167683,3.7874409 1.2831558,2.5804655 Z"
     id="path457" />
</svg>

Also dieses SVG-Bild statt <IoArrowUpCircleSharp> verwenden.

Woher ich das weiß:Berufserfahrung – Softwareentwickler & Admin

johndont

Beitragsersteller

14.07.2024, 12:06

Danke daran habe ich garnicht gedacht weil ich keine Ahnung von SVG-Grafiken habe, aber wir haben ja heutzutage ChatGPT.

Muss es damit nur in validen JSX Code wegen dem style umändern und minimal kleiner machen dann passt es.

iQa1x

14.07.2024, 12:07

@johndont

Ich habe das Ding schnell in Inkscape zusammengeklickt, ich habe den Pfeil auch nicht von Hand als Code geschrieben ;)

johndont

Beitragsersteller

14.07.2024, 12:13

@iQa1x

Achso das kannte ich garnicht, dachte immer falsch man macht so simple Icons manuell selber und aufwendige Logos mit Programmen die so teuer sind wie Adobe Canva.
Werde ich mir anschauen aber auch seltsam das react-icons nicht selber die Props hat um das innere auszufüllen.

Hatte mich schon seit Tagen gestört auf meiner Website

Ähnliche Beiträge

JavaScript "window is not defined"?

Ich möchte dieses Beispiel hier in meine Next.js (React) App übernehmen:

https://codesandbox.io/s/knhlr?file=/src/index.tsx:0-691

Dazu mein Next.js (React) Code, der eine weiße Seite wiedergibt und in der console schreibt: "window is not defined"

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            <ReactGlobe
                height="100vh"
                globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                markers={markers}
                width="100vw"
                options={options}
            />
        </div>
    );
}

...zum Beitrag

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zum Beitrag

Ich verstehe diese andere schreibweise nicht was bedeuted es und wie lerne ich es um zu schreiben?

import fs from "node:fs/promises";

anstelle von

const { fs } = require('fs/promises');

jetzt hab ich nur folgendes problem wie importiere ich folgendes:

var MongoClient = require('mongodb').MongoClient;

mein erster gedanke war

import MongoClient from "('mongodb').MongoClient";

das ist aber falsch verstehe es irgendwie nicht. Wäre nett wenn mir das jemand erklären könnte. Danke im voraus :D

...zum Beitrag

Warum kann ich OpenAI nicht im Terminal verwenden?

Hallo,

ich programmiere gerade einen Sprachassistenten. Das ist der Code dafür:

import pyttsx3
import re
import pyjokes
import speech_recognition as sr
from pyowm import OWM
import spotipy
from spotipy.oauth2 import SpotifyOAuth
import time
import random
import datetime
import pytz
from geopy.geocoders import Nominatim
from timezonefinder import TimezoneFinder
import sounddevice as sd
import pvporcupine
import openai

openai.api_key = 'sk-...'
model_id = "gpt-4"

engine = pyttsx3.init()


def recognize_speech(recognizer, source):
    print("Sage etwas...")
    audio = recognizer.listen(source, timeout=15)
    try:
        text = recognizer.recognize_google(audio, language="de-DE")
        print("Text: " + text)
        return text
    except sr.UnknownValueError:
        return "not_understood"
    except sr.RequestError as e:
        print(f"Fehler bei der Anfrage an die Google Web Speech API: {e}")
        return ""


def openai_request(prompt):
    response = openai.Completion.create(
        model=model_id,
        messages=[{"role": "user", "content": prompt}],
        max_tokens=150
    )

    api_usage = response['usage']
    print('Total Token consumed: {0}'.format(api_usage['total_tokens']))
    prompt += response.choices[0].message['content']
    return prompt


def speak(text=None):
    if text:
        engine.say(text)
        engine.runAndWait()


def hey_luna_in_q(q):
    return "hey luna" in q.lower()


def wait_for_wake_word(recognizer, source):
    while True:
        print("Warte auf Wake-Word...")
        audio = recognizer.listen(source)
        try:
            text = recognizer.recognize_google(audio, language="de-DE")
            if hey_luna_in_q(text):
                print("Wake-Word erkannt!")
                return
        except sr.UnknownValueError:
            pass
        except sr.RequestError as e:
            print(f"Fehler bei der Anfrage an die Google Web Speech API: {e}")


def execute():
    recognizer = sr.Recognizer()

    with sr.Microphone() as source:
        wait_for_wake_word(recognizer, source)

        while True:
            q = recognize_speech(recognizer, source)
            print("Erkannter Text:", q)

            if q == "not_understood":
                speak("Entschuldigung! Das habe ich nicht verstanden.")
                continue

            if "hallo" in q.lower():
                speak("Hallo! Womit kann ich dir behilflich sein?")
                continue

            prompt = q
            response = openai_request(prompt)

            if response.lower().startswith(q.lower()):

                response = response[len(q):].strip()

            speak(response)
            return


if __name__ == '__main__':
    execute()

Wenn ich in PyCharm das Programm ausführe und dann z.B. frage: Wann war der erste Weltkrieg? Dann funktioniert alles perfekt (ich bekomme eine Antwort und es gibt keine Fehler). Wenn ich das Programm nun aber im Terminal ausführe, kommt dieser Fehlercode:

Text: wann war der erste Weltkrieg

Erkannter Text: wann war der erste Weltkrieg

Traceback (most recent call last):

File "C:\Users\User\PycharmProjects\voiceAssistant\main.py", line 106, in <module>

execute()

File "C:\Users\User\PycharmProjects\voiceAssistant\main.py", line 95, in execute

response = openai_request(prompt)

^^^^^^^^^^^^^^^^^^^^^^

File "C:\Users\User\PycharmProjects\voiceAssistant\main.py", line 39, in openai_request

response = openai.Completion.create(

^^^^^^^^^^^^^^^^^^^^^^^^^

File "C:\Users\User\AppData\Local\Programs\Python\Python312\Lib\site-packages\openai\lib\_old_api.py", line 39, in __call__

raise APIRemovedInV1(symbol=self._symbol)

openai.lib._old_api.APIRemovedInV1:

You tried to access openai.Completion, but this is no longer supported in openai>=1.0.0 - see the README at https://github.com/openai/openai-python for the API.

You can run `openai migrate` to automatically upgrade your codebase to use the 1.0.0 interface.

Alternatively, you can pin your installation to the old version, e.g. `pip install openai==0.28`

A detailed migration guide is available here: https://github.com/openai/openai-python/discussions/742

C:\Users\User\PycharmProjects\voiceAssistant>

Ich weiss wirklich nicht, wie ich diesen Fehler beheben kann. Bitte helft mir.

Freundliche Grüsse

...zum Beitrag

Warum wird das Wake Word nicht erkannt?

Hallo,

ich programmiere momentan einen Sprachassistenten und bin gerade am Wake Word dran. Mein Code sieht so aus:

import pyttsx3
import re
import pyjokes
import speech_recognition as sr
from pyowm import OWM
import spotipy
from spotipy.oauth2 import SpotifyOAuth
import time
import random
import datetime
import pytz
from geopy.geocoders import Nominatim
from timezonefinder import TimezoneFinder
import sounddevice as sd
import pvporcupine
import openai

openai.api_key = 'sk-...'
model_id = "gpt-4"

engine = pyttsx3.init()


def recognize_speech(recognizer, source):
    print("Sage etwas...")
    audio = recognizer.listen(source, timeout=15)
    try:
        text = recognizer.recognize_google(audio, language="de-DE")
        print("Text: " + text)
        return text
    except sr.UnknownValueError:
        return "not_understood"
    except sr.RequestError as e:
        print(f"Fehler bei der Anfrage an die Google Web Speech API: {e}")
        return ""


def picovoice_listen():
    keyword_file_path = "C:\\Hey-Luna_de_windows_v3_0_0\\Hallo-Luna_de_windows_v3_0_0.ppn"
    sensitivities = [0.7]

    try:
        porcupine = pvporcupine.create(
            access_key='...',
            keyword_paths=['C:\\Hey-Luna_de_windows_v3_0_0\\Hallo-Luna_de_windows_v3_0_0.ppn'],
            model_path='C:\\Hey-Luna_de_windows_v3_0_0\\porcupine_params_de.pv'
        )

        sample_rate = porcupine.sample_rate
        print("Sample Rate:", sample_rate)

        pcm = record_audio(sample_rate=sample_rate, duration=3)
        keyword_index = porcupine.process(pcm)

        if keyword_index >= 0:
            print("Wake word detected!")
            porcupine.delete()
            return True
        else:
            print("Wake word not detected!")

    except pvporcupine.PorcupineError as e:
        print(f"Porcupine error: {e}")

    return False


def record_audio(sample_rate, duration):
    print("Aufnahme gestartet...")
    audio = sd.rec(int(sample_rate * duration), samplerate=sample_rate, channels=1, dtype='int16')
    sd.wait()
    print("Aufnahme beendet.")
    return audio.flatten()[:512]


def openai_request(prompt):
    response = openai.ChatCompletion.create(
        model=model_id,
        messages=prompt
    )

    api_usage = response['usage']
    print('Total Token consumed: {0}'.format(api_usage['total_tokens']))
    prompt.append({'role': response.choices[0].message.role, 'content': response.choices[0].message.content})
    return prompt


def speak(text):
    engine.say(text)
    engine.runAndWait()


def ausführen():
    recognizer = sr.Recognizer()

    while True:
        if picovoice_listen():
            with sr.Microphone() as source:
                q = recognize_speech(recognizer, source)
                print("Erkannter Text:", q)

                if q == "not_understood":
                    speak("Entschuldigung! Das habe ich nicht verstanden.")
                    continue

                elif "hallo" in q:
                    speak('Hallo! Womit kann ich dir behilflich sein?')
                    continue

                else:
                    prompt = [{'role': 'user', 'content': q}]
                    prompt = openai_request(prompt)
                    response = prompt[-1]['content']
                    speak(response)
                    return  # Programm beenden, nachdem die Antwort gesprochen wurde


if __name__ == '__main__':
    ausführen()

wenn ich nun aber das Programm ausführe und das Wake Word ("Hallo Luna") sage, kommt immer "Wake word not detected!" und dann wiederholt sich das ganze, egal wie oft ich das Wake word sage. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Automatisch Scrollen?

Hallo,

auf meiner Website hab ich 2 Icons, die durch eine Klick Funktion jeweils ein Div darunter erscheinen lassen.

Sobald ein Div erscheint oder ich die passende Klasse hinzufüge soll nun zu den passenden Div runter oder zum Seitenanfang gescrollt werden.

Wo liegt der Fehler ?...ich steh etwas aufm Schlauch.

Das Problem muss nicht unbedingt mit einer Scroll function gelöst werden =)

function klick() {
    let hauptDiv = document.getElementById('div_eins');


    if (hauptDiv.classList.contains('unsichtbar') == true) {
        hauptDiv.classList.remove('unsichtbar');
        hauptDiv.classList.add('sichtbar');
        window.scrollTo(0, 100);
    } else if (hauptDiv.classList.contains('sichtbar') == true) {
        hauptDiv.classList.remove('sichtbar');
        hauptDiv.classList.add('unsichtbar');
    }   else {
           return;
        }
    }

...zum Beitrag

Wo kann ich Tokens für GPT-4 kaufen?

Hallo,

ich programmiere gerade einen Sprachassistenten und wollte ihn nun mit GPT-4 verbinden, ich habe auf Shop - ChatGPT 50000 Tokens gekauft, doch wenn ich das Programm starte, steht, dass ich trotzdem keinen Zugriff auf GPT-4 habe. Muss ich die Tokens irgendwo anders kaufen?

Mein Code:

import openai
import pyttsx3
import re
import pyjokes
import speech_recognition as sr
from pyowm import OWM
import spotipy
from spotipy.oauth2 import SpotifyOAuth
import time
import random
import datetime
import pytz
from geopy.geocoders import Nominatim
from timezonefinder import TimezoneFinder


openai.api_key = 'sk-...'
model_id = "gpt-4"

engine = pyttsx3.init()


def recognize_speech():
    recognizer = sr.Recognizer()

    while True:
        with sr.Microphone() as source:
            print("Sage etwas...")
            audio = recognizer.listen(source, timeout=15)

        try:
            text = recognizer.recognize_google(audio, language="de-DE")
            print("Text: " + text)
            return text
        except sr.UnknownValueError:
            return "not_understood"
        except sr.RequestError as e:
            print(f"Fehler bei der Anfrage an die Google Web Speech API: {e}")
            return ""


def openai_request(prompt):
    response = openai.ChatCompletion.create(
        model=model_id,
        messages=prompt
    )

    api_usage = response['usage']
    print('Total Token consumed: {0}'.format(api_usage['total_tokens']))
    prompt.append({'role': response.choices[0].message.role, 'content': response.choices[0].message.content})
    return prompt


def speak(text):
    engine.say(text)
    engine.runAndWait()


def ausführen():
    while True:
        q = recognize_speech()
        print("Erkannter Text:", q)

        if q == "not_understood":
            speak("Entschuldigung! Das habe ich nicht verstanden.")
            break

        elif not q:
            break

        elif "hallo" in q:
            speak('Hallo! Womit kann ich dir behilflich sein?')
            break

        else:
            prompt = [{'role': 'user', 'content': q}]
            prompt = openai_request(prompt)
            response = prompt[-1]['content']
            speak(response)


if __name__ == '__main__':
    ausführen()

Fehlercode:

C:\Users\User\PycharmProjects\voiceAssistant\venv\interpreter\Scripts\python.exe C:\Users\User\PycharmProjects\voiceAssistant\main.py

Sage etwas...

Text: wann war der erste Weltkrieg

Erkannter Text: wann war der erste Weltkrieg

Traceback (most recent call last):

File "C:\Users\User\PycharmProjects\voiceAssistant\main.py", line 83, in <module>

ausführen()

File "C:\Users\User\PycharmProjects\voiceAssistant\main.py", line 77, in ausführen

prompt = openai_request(prompt)

^^^^^^^^^^^^^^^^^^^^^^

File "C:\Users\User\PycharmProjects\voiceAssistant\main.py", line 43, in openai_request

response = openai.ChatCompletion.create(

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

File "C:\Users\User\PycharmProjects\voiceAssistant\venv\interpreter\Lib\site-packages\openai\api_resources\chat_completion.py", line 25, in create

return super().create(*args, **kwargs)

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

File "C:\Users\User\PycharmProjects\voiceAssistant\venv\interpreter\Lib\site-packages\openai\api_resources\abstract\engine_api_resource.py", line 153, in create

response, _, api_key = requestor.request(

^^^^^^^^^^^^^^^^^^

File "C:\Users\User\PycharmProjects\voiceAssistant\venv\interpreter\Lib\site-packages\openai\api_requestor.py", line 298, in request

resp, got_stream = self._interpret_response(result, stream)

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

File "C:\Users\User\PycharmProjects\voiceAssistant\venv\interpreter\Lib\site-packages\openai\api_requestor.py", line 700, in _interpret_response

self._interpret_response_line(

File "C:\Users\User\PycharmProjects\voiceAssistant\venv\interpreter\Lib\site-packages\openai\api_requestor.py", line 765, in _interpret_response_line

raise self.handle_error_response(

openai.error.InvalidRequestError: The model `gpt-4` does not exist or you do not have access to it. Learn more: https://help.openai.com/en/articles/7102672-how-can-i-access-gpt-4.

Process finished with exit code 1

Freundliche Grüsse

...zum Beitrag

Warum Funktioniert mein Wake Word nicht?

Hallo,

ich programmiere gerade einen Sprachassistenten und bin gerade am Wake Word dran. Mein Code sieht so aus:

import openai
import pyttsx3
import re
import pyjokes
import speech_recognition as sr
from pyowm import OWM
import spotipy
from spotipy.oauth2 import SpotifyOAuth
import time
import random
import datetime
import pytz
from geopy.geocoders import Nominatim
from timezonefinder import TimezoneFinder
import sounddevice as sd
import pvporcupine

openai.api_key = 'sk-...'
model_id = "gpt-4"

engine = pyttsx3.init()

WAKE_WORD_MODEL_FILE_PATH = "C:\\Hey-Luna_de_windows_v3_0_0\\Hey-Luna_de_windows_v3_0_0.ppn"


def recognize_speech():
    recognizer = sr.Recognizer()

    while True:
        with sr.Microphone() as source:
            print("Sage etwas...")
            audio = recognizer.listen(source, timeout=15)

        try:
            text = recognizer.recognize_google(audio, language="de-DE")
            print("Text: " + text)
            return text
        except sr.UnknownValueError:
            return "not_understood"
        except sr.RequestError as e:
            print(f"Fehler bei der Anfrage an die Google Web Speech API: {e}")
            return ""


def record_audio(sample_rate, duration):
    print("Aufnahme gestartet...")
    audio = sd.rec(int(sample_rate * duration), samplerate=sample_rate, channels=1, dtype='int16')
    sd.wait()
    print("Aufnahme beendet.")
    return audio.flatten()


def picovoice_listen():
    keyword_file_path = "C:\\Hey-Luna_de_windows_v3_0_0\\Hey-Luna_de_windows_v3_0_0.ppn"
    sensitivities = [0.5]  # Adjust as needed

    try:
        handle = pvporcupine.create(
            keyword_paths=[keyword_file_path],
            sensitivities=sensitivities,
            access_key='...'
        )

        sample_rate = handle.sample_rate

        while True:
            pcm = record_audio(sample_rate=sample_rate, duration=15)
            keyword_index = handle.process(pcm)

            if keyword_index >= 0:
                print("Wake word detected!")
                break

    except pvporcupine.PorcupineError as e:
        print(f"Porcupine error: {e}")

    finally:
        if 'handle' in locals():
            handle.delete()


def openai_request(prompt):
    response = openai.ChatCompletion.create(
        model=model_id,
        messages=prompt
    )

    api_usage = response['usage']
    print('Total Token consumed: {0}'.format(api_usage['total_tokens']))
    prompt.append({'role': response.choices[0].message.role, 'content': response.choices[0].message.content})
    return prompt


def speak(text):
    engine.say(text)
    engine.runAndWait()


def ausführen():
    while True:
        picovoice_listen()

        q = recognize_speech()
        print("Erkannter Text:", q)

        if q == "not_understood":
            speak("Entschuldigung! Das habe ich nicht verstanden.")
            break

        elif not q:
            break

        elif "hallo" in q:
            speak('Hallo! Womit kann ich dir behilflich sein?')
            continue

        else:
            prompt = [{'role': 'user', 'content': q}]
            prompt = openai_request(prompt)
            response = prompt[-1]['content']
            speak(response)
            break


if __name__ == '__main__':
    ausführen()

wenn ich nun aber das Programm ausführe, kommt diese Meldung und ich muss das Wake Word nicht sagen, um meine Frage zu stellen, welche dann von z.B. OpenAI beantwortet wird:

C:\Users\User\PycharmProjects\voiceAssistant\venv\interpreter\Scripts\python.exe C:\Users\User\PycharmProjects\voiceAssistant\main.py

Porcupine error: Initialization failed:

[0] Keyword file (.ppn) and model file (.pv) should belong to the same language. File belongs to `de` while model file (.pv) belongs to `en`.

Sage etwas...

woran liegt das?

Freundliche Grüsse

...zum Beitrag

React Js Props State unterschied?

Was Props sind weiss ich aber State will ich nicht so ganz verstehen.

Die Dokumentation von React ist sowieso komisch.
Habe gehört das es ähnlichkeiten hat.

Props würde ich so benutzen in der index.js

import App from irgendwas…
<App name="Max"/>
Und in der App.js
const App = (props)=>{
<h1> {name.props} </h1>} 
export default …

kann man das gleiche jetzt auch mit state machen oder wie kann ich mir das vorstelle. ?

...zum Beitrag

Ist es noch sinnvoll, NextJS zu lernen?

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

...zum Beitrag

Discord.js: "Invalid Form Body"-Fehler?

Hi, ich habe ein Problem mit Discord.js und dem ButtonBuilder.

Der Fehler (unter dieser Fehlermeldung kommt noch eine Meldung mit JSON, falls man das in eine Webseite reinpacken will oder so):

DiscordAPIError[50035]: Invalid Form Body
components[0][UNION_TYPE_CHOICES]: Value of field "type" must be one of (1,).

Der JavaScript Code (unten, das habe ich nicht noch kopiert, habe ich den Bot noch mit dem Token aktiviert):

import { Client, GatewayIntentBits, Partials,  ButtonStyle, ButtonBuilder } from "discord.js"

const client = new Client({ intents: [
  GatewayIntentBits.Guilds,
  GatewayIntentBits.GuildMessages,
  GatewayIntentBits.DirectMessages,
  GatewayIntentBits.GuildMembers
]})
const btn = new ButtonBuilder({
  custom_id: "Hi",
  style: ButtonStyle.Primary,
  label: "Moinsen"
})
client.on("messageCreate", async (message) => {
  if (message.author.bot == false) {
    message.reply({ content: "Hello", components: [btn] })
  }
})

...zum Beitrag

flask: jinja2.exceptions.TemplateNotFound: index.html | Wie fixen?

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>

...zum Beitrag

Mit Funktionen in Python dividieren funktioniert falsch?

Hallo, leider funktioniert der Code, aber "vertauscht" die Zahlen. Wie kann ich das fixen?

from functools import partial
from operator import add, floordiv, mul, sub


def three(op=None): 
    return 3 if not op else op(3)

def seven(op=None): 
    return 7 if not op else op(7)


def plus(val): 
    return partial(add, val)

def minus(val): 
    return partial(sub, val)

def times(val): 
    return partial(mul, val)

def divided(val): 
    return partial(floordiv, val)

print(seven(divided(three())))  # --> 0 

print(three(divided(seven())))  # --> 2

...zum Beitrag

Raspberry PI Flask-404 Not Found?

Hallo!

Ich habe das programmiert. Es wird jede Sekunde die Temperatur von der CPU ausgelesen. Jetzt möchte ich Flask einbauen, damit ich mit mehreren PC's darauf zugreifen kann. Aber es funktioniert nicht. Warum?

from flask import Flask, jsonify
import subprocess
import time
import os
from colorama import Fore, Style

app = Flask(__name__)

@app.route("/temp")
def get_cpu_temperature():
  try:
    result = subprocess.run(['vcgencmd', 'measure_temp'], capture_output=True, text=True, check=True)
    temperature_str = result.stdout.strip()
    temperature = float(temperature_str[5:-2]) # Extrahiere die Temperatur aus dem String
    return temperature
  except subprocess.CalledProcessError as e:
    print(f"Fehler beim Ausführen des Befehls: {e}")
    return None

def print_colored_temperature(temperature):
  if temperature is not None:
    if temperature > 49.9:
      print(f"{Fore.RED}Temperatur: {temperature}°C{Style.RESET_ALL}")
    else:
      print(f"Temperatur: {temperature}°C")
  else:
    print("Fehler beim Lesen der CPU-Temperatur.")

def main():
  try:
    while True:
      temperature = get_cpu_temperature()
      print_colored_temperature(temperature)
      time.sleep(1)
      os.system('clear')
  except KeyboardInterrupt:
    print("Programm wurde durch den Benutzer unterbrochen.")
  except Exception as e:
    print(f"Ein Fehler ist aufgetreten: {e}")
     
     


if __name__ == '__main__':
  app.run(host="0.0.0.0")

if __name__ == '__main__':
  main()
  import sys
  sys.exit(main(sys.argv))

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen