Das könnte dich ebenfalls interessieren: Docker Images erstellen und auf Dockerhub hochladen

Einen VPS bei Hetzner einrichten

Hetzner bietet oft Empfehlungslinks mit Guthaben-Vorteilen für Neukunden. Selbstverständlich kann man auch andere Anbieter nutzen, aber Hetzner ist preislich attraktiv und bietet solide Leistungen.

Was ist ein VPS?

Ein Virtual Private Server (VPS) ist ein virtueller Server, der auf einer physischen Maschine betrieben wird und als eigenständiger Server agiert. Er bietet mehr Kontrolle als klassisches Shared Hosting und ist eine kostengünstige Alternative zu dedizierten Servern. Der Zugriff erfolgt in der Regel per SSH (Secure Shell), wodurch wir den Server über die Kommandozeile steuern können.

SSH-Zugriff auf den VPS

Nach dem Erstellen eines VPS erfolgt die Verwaltung meist über eine Secure Shell (SSH). SSH ist ein Protokoll, das verschlüsselte Verbindungen zu entfernten Servern ermöglicht. Um sich mit dem Server zu verbinden, nutzt man folgenden Befehl:

ssh root@<IP-Adresse-des-Servers>

Falls ein SSH-Schlüssel hinterlegt wurde, kann die Authentifizierung per Public-Key-Authentifizierung erfolgen, was sicherer als ein Passwort ist.

Server bei Hetzner erstellen

1. Nach der Anmeldung in der Hetzner Cloud navigieren wir zu „Projekte“ und erstellen ein neues Projekt.
2. Danach wählen wir „Server hinzufügen“ und können eine Instanz konfigurieren.
3. Für den Anfang reicht oft das günstigste Modell aus. Ich empfehle jedoch, die Option für eine IPv4-Adresse zu aktivieren, da rein IPv6-basierte Setups oft Kompatibilitätsprobleme verursachen.

Domain einrichten

Um die Anwendung später unter einer eigenen Domain zu erreichen, muss man eine Domain registrieren und mit dem Server verknüpfen.

Domain bei Hetzner beantragen

1. In der Hetzner ConsoleH eine neue Domain registrieren oder eine bestehende Domain hinzufügen.
2. Um DNS-Einträge zu verwalten, müssen wir den DNS-Zugriff aktivieren.

Nameserver setzen

Folgende Nameserver sollten genutzt werden:

helium.ns.hetzner.de. 
hydrogen.ns.hetzner.com. 
oxygen.ns.hetzner.com.

Diese neuen Nameserver bieten bessere Performance und Flexibilität im Vergleich zu den alten Hetzner-Nameservern:

ns1.first-ns.de.
robotns2.second-ns.de.
robotns3.second-ns.com.

Beide Nameserver Varianten sind aber möglich! Die DNS Änderungen brauchen etwas Zeit. Mit Tools wie MXToolbox können wir aber überprüfen, ob die Änderungen bereits stattgefunden haben.

Domain mit dem Server verbinden

Nun muss die IP-Adresse des Servers mit der Domain verknüpft werden:

1. In der Hetzner Cloud zu DNS-Zonen wechseln.
2. Die registrierte Domain auswählen.
3. Einen neuen A-Record erstellen und die IPv4-Adresse des Servers eintragen.
4. Falls vorhanden, den IPv6-Record (AAAA) entfernen, um Kompatibilitätsprobleme zu vermeiden.

Mit MXToolbox kann man auch hier prüfen, ob die DNS-Änderungen bereits übernommen wurden.

Kubernetes einrichten

Kubernetes ist ein leistungsfähiges Orchestrierungstool für Container. Ich verwende k3s, eine schlanke Kubernetes-Variante, die sich besonders gut für kleinere Umgebungen eignet.

K3s auf dem Server installieren

Per SSH auf den Server verbinden und k3s mit folgendem Befehl installieren:

curl -sfL https://get.k3s.io | sh - 

Das Skript installiert k3s und startet den Kubernetes-Dienst. Nach der Installation kann k3s mit folgendem Befehl überprüft werden:

kubectl get nodes

k3s bringt eine eigene kubectl-Version mit, sodass keine separate Installation nötig ist.

YAML-Files für FE, BE, MySQL und Redis erstellen

Für das Deployment unserer Anwendung brauchen wir YAML-Dateien für:

• Frontend (Angular)
• Backend (NestJS)
• Datenbank (MySQL)
• Session-Management (Redis)

Eine Deployment-Datei für das Backend könnte so aussehen:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: dockerhub-user/backend:latest
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

Was sind Deployments und Services?

• Deployments verwalten die Bereitstellung und Skalierung von Containern.
• Services sorgen für eine stabile Netzwerkverbindung zwischen Containern.
• ClusterIP bedeutet, dass der Service nur innerhalb des Kubernetes-Clusters erreichbar ist.

Caddy als Reverse Proxy einrichten

Damit eingehender Traffic richtig verteilt wird, wird ein Reverse Proxy benötigt. K3s bringt standardmäßig Traefik mit, allerdings habe ich mich für eine einfachere Lösung entschieden: Caddy. Ich war echt erstaunt wie wenig Anleitungen bzw. Dokumentation es zu Caddy in Kombination mit Kubernetes gibt.

Warum Kubernetes mit Caddy?

• Automatische Let’s Encrypt SSL-Zertifikate
• Einfache Konfiguration per Caddyfile
• Built-in Load Balancer

Traefik entfernen

kubectl delete helmrelease traefik -n kube-system

Caddy Deployment erstellen

apiVersion: apps/v1
kind: Deployment
metadata:
  name: caddy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: caddy
  template:
    metadata:
      labels:
        app: caddy
    spec:
      containers:
        - name: caddy
          image: caddy
          volumeMounts:
            - name: caddy-config
              mountPath: /etc/caddy/Caddyfile
      volumes:
        - name: caddy-config
          configMap:
            name: caddy-config
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: caddy-config
data:
  Caddyfile: |

    example.com {
        reverse_proxy backend-service:3000
    }

---
apiVersion: v1
kind: Service
metadata:
  name: caddy-service
spec:
  type: LoadBalancer
  selector:
    app: caddy
  ports:
    - port: 80
      targetPort: 80
    - port: 443
      targetPort: 443

Wichtig: Da Let’s Encrypt ein Rate-Limit hat, sollten Tests zunächst mit Staging-Zertifikaten erfolgen!

Fazit

Nach diesen Schritten läuft die Anwendung nun in einem Kubernetes-Cluster auf einem Hetzner VPS und ist über eine eigene Domain erreichbar. Als nächstes würde es sich anbieten eine automatische CI/CD-Pipeline einzurichten, um neue Versionen ohne manuellen Aufwand zu deployen.

The post Deployment einer WebApp mit Kubernetes und Caddy appeared first on Nerd Corner.

Das könnte dich ebenfalls interessieren: NestJS auf Vercel hosten

Erstellung der Docker Compose Yml

Mit Docker Compose können alle Komponenten einer Anwendung über eine einzige Konfigurationsdatei definiert und gemeinsam gebuildet bzw. gestartet werden.

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    depends_on:
      - mysql
      - redis
    environment:
      - DATABASE_URL=mysql://user:password@mysql:3306/db
      - SESSION_STORE=redis://redis:6379

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: db
    ports:
      - "3306:3306"

  redis:
    image: redis:latest
    ports:
      - "6379:6379"

Erstellung der Env Datei

Um Umgebungsvariablen zentral zu verwalten, erstellen wir eine .env Datei:

DATABASE_URL=mysql://user:password@mysql:3306/db 
SESSION_STORE=redis://redis:6379

Wichtig: Alle ENV-Variablen, die im Code verwendet werden, müssen auch in docker-compose.yml vorkommen!

Docker-Image für das Frontend

Das Angular-Frontend muss für die Produktion gebaut werden. Hier ein Beispiel-Dockerfile:

FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

Da wir für den Build auf nginx angewiesen sind brauchen wir auch eine entsprechende Config Datei:

server {
  listen 80;
  server_name _;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

Docker-Image für das Backend

Auch das NestJS-Backend muss gebaut werden. Hier ein optimiertes Dockerfile

# Build stage
FROM node:20 AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM node:20-alpine
WORKDIR /app

COPY --from=build /app/dist ./dist
COPY package.json package-lock.json ./
RUN npm install --only=production
CMD ["node", "dist/main.js"]

Builden der App mit Docker Compose

Nachdem alle Dockerfiles konfiguriert wurden können jetzt die Images gebuildet werden. Mit Docker compose ist das ganze wirklich einfach.

docker compose up -d --build

Anschließend sind die Images fertig, die Container gebaut und die App kann lokal direkt ausgetestet werden! Als letzer Schritt müssen die Images noch auf DockerHub hochgeladen werden, damit sie später leichter für das Deployment auf einem Server genutzt werden können.

Hochladen auf Docker Hub

Das Hochladen wird nachfolgend Schritt für Schritt erklärt:

1. Erstelle einen Account bei Docker Hub.
2. Erstelle ein Repository für das Frontend und Backend (1 privates Repo ist aktuell kostenlos).
3. Baue die Images und tagge sie:

   docker tag <image-id> dockerAccountName/frontend:latest
   docker tag <image-id> dockerAccountName/backend:latest

4. Melde dich an und pushe die Images:

   docker login
   docker push dockerAccountName/frontend:latest
   docker push dockerAccountName/backend:latest

Ausblick: Deployment mit Kubernetes

Da die Images nun auf Docker Hub sind, steht dem Deployment nichts mehr im Wege. Ich habe mich für ein Kubernetes-Cluster auf einem Hetzner-VPS entschieden. Mehr Infos dazu hier.

The post Docker Images erstellen und auf Docker Hub hochladen appeared first on Nerd Corner.

Aber wäre es nicht viel praktischer, ganz auf physische Schlüssel zu verzichten? Heutzutage gibt es zahlreiche Möglichkeiten, ein Schloss zu öffnen: Fingerabdruckscanner, Gesichtserkennung, NFC, Zahlencodes, Stellräder – oder natürlich brachiale Methoden wie Sprengstoff und rohe Gewalt. Doch wenn man eine preiswerte, gewaltfreie und einfache Lösung sucht, rückt das Tastenfeldschloss in den Fokus.

Überraschenderweise gibt es im Internet kaum wirklich gute DIY-Lösungen für Hobbybastler. Also packe ich es selbst an – mein erstes Tastenfeld-Schloss, das ich schlicht „Version 1“ nenne.

Das könnte dich auch interessieren: DIY Powerbank mit Spannungsregler und Voltmeter

Konstruktion des Gehäuses

Zunächst liegt der Fokus auf dem Gehäuse und der Aufnahme für das Tastenfeld. Die erste Frage, die sich dabei immer stellt: Wie groß soll es sein? Die Antwort hängt von mehreren Faktoren ab:

• Welche Komponenten werden benötigt? Jedes Bauteil nimmt Platz ein und beeinflusst die Bauweise.
• Wie viel Raum beanspruchen die Komponenten? Ein kompaktes Design ist vorteilhaft, darf aber nicht die Funktionalität einschränken.
• Wie sind Haptik und Bedienbarkeit? Das Tastenfeld sollte angenehm zu bedienen sein, ohne dass es zu eng oder unpraktisch wird.

Diese Überlegungen bilden die Grundlage für das Gehäusedesign – denn eine gute Planung spart später Zeit und Nerven.

Was kommt ins Gehäuse?

Zentraler Bestandteil ist natürlich das Membrantastenfeld (1.0.1). Es hat die folgenden Abmessungen:

• Breite: 69 mm
• Länge: 76 mm
• Dicke: 0,6 mm (bzw. 0,95 mm über den Tasten)

Zusätzlich verfügt das Tastenfeld über ein Flachbandkabel mit DuPont-Buchsen zum Anschluss an einen Mikrocontroller. Das Kabel selbst ist 85 mm lang und 17,78 mm breit.

Die Schaltzentrale des Schlosses bildet der Nano (1.0.2). Um ihn sauber im Gehäuse unterzubringen und die Kabelverbindungen möglichst komfortabel zu gestalten, habe ich mich für ein Nano-Expansionsboard mit Schraubklemmen (1.0.4) entschieden.

Für die Notstromversorgung kommt eine Hohlbuchse (5,5 x 2,1 mm, 1.0.4) zum Einsatz, damit das Schloss auch bei einem Stromausfall weiterhin funktioniert.

Die Stift- und Buchsenleisten (1.1.1) dienen als zentrale Stromverteilung und werden später auf die Lochrasterplatte (1.1.2) gelötet. Damit alle Komponenten zuverlässig verbunden werden, kommen Jumperkabel (1.1.3) zum Einsatz. Je nach Position der Bauteile sind unterschiedliche Längen erforderlich – in diesem Fall 10 cm und 20 cm.

Für die Statusanzeige des Tastenfeldschlosses setze ich auf Neo-Pixel – adressierbare LEDs vom Typ WS2812b (1.2.1). Damit lassen sich verschiedene Farben und Effekte steuern, um den aktuellen Zustand des Schlosses visuell darzustellen.

Auf die Positionierung der Schrauben gehe ich später noch genauer ein.

Nachdem die Komponenten nun feststehen, kann ich mir Gedanken über die Größe des Gehäuses machen. Diese wird nicht nur durch die verbauten Elemente bestimmt, sondern vor allem durch die Bedienbarkeit und Haptik.

Tastenfelder begegnen uns täglich – an Bankautomaten, Telefonen, Türschlossanlagen und natürlich Smartphones. Die Entscheidung für die Tiefe des Gehäuses basiert auf einer positiven Erinnerung an meinen vorletzten Arbeitsplatz: Das dortige Tastenfeldschloss am Eingang war erhöht und von beiden Seiten gut zugänglich. Man konnte es bequem mit dem rechten oder linken Daumen bedienen, und die abgerundeten Ecken sorgten für eine angenehme Haptik beim Auflegen der Hand.

Tastenfeldschloss Gehäusedesign

Daraus ergibt sich eine Tiefe von 45 mm (2.0.3). Für eine bessere Ergonomie erhalten die Ecken einen Radius von 15 mm (R15) und die umlaufenden oberen Kanten einen Radius von 10 mm (R10). Mir ist bewusst, dass diese Verrundungen den Innenraum leicht verkleinern, aber der Komfort und die Optik überwiegen diesen Nachteil.

Die Breite und Höhe des Gehäuses ergeben sich aus den einzubauenden Komponenten. Dabei muss auch der Platz für die Verkabelung berücksichtigt werden. Besonders wichtig: Der Nano sollte im eingebauten Zustand weiterhin mit einem handelsüblichen USB-Mini-Kabel erreichbar sein, um beispielsweise neue Programme aufspielen zu können.

Montage und Befestigung

• Vier M3-Gewinde (2.0.1) an der Innenseite ermöglichen das Anschrauben der Trägerplatte.
• Zusätzlich gibt es vier Montagepunkte mit Ø4,2 mm Bohrungen zur Befestigung des Gehäuses an einer Tür, einem Deckel oder einer Wand.
• Das Gehäuse erhält ein Fenster (2.0.2) mit 60 × 67 mm, das für das Tastenfeld vorgesehen ist. Dieses wird später mit der Trägerplatte ausgefüllt.
• Haltesäulen mit M2-Gewinde sowie die Öffnung für die Hohlbuchse (1.0.4) sind mit orangen Ellipsen markiert (2.0.1, 2.0.3).
• Das nächste Bild (2.0.4) zeigt die Außenmaße: 110 mm Breite und 117 mm Höhe.
• Außerdem ist ein Durchbruch bzw. Schlitz von 50 mm Länge für die LED-Blende (2.0.5) erforderlich.

Für die Wandstärke des Gehäuses habe ich durchgehend 2 mm vorgesehen – stabil genug für den vorgesehenen Einsatzzweck.

Mit der abgeschlossenen Gehäusekonstruktion können wir nun mit den weiteren Komponenten fortfahren.

Die Trägerplatte – das zentrale Montageelement

Die nächste wichtige Komponente ist die Trägerplatte. Der Name erklärt sich von selbst: Bis auf die Hohlbuchse werden hier alle Bauteile befestigt. Dieses System bietet mehrere Vorteile gegenüber einer direkten Montage im Gehäuse:

Einfache Montage außerhalb des Gehäuses – Mehr Platz und bessere Handhabung bei der Verkabelung.
Modularität – Verschiedene Trägerplatten mit unterschiedlichen Komponenten sind möglich.
Schlichtes Gehäusedesign – Die Gehäusekonstruktion bleibt einfacher und flexibler.
Leichter Austausch – Komponenten lassen sich einfacher ersetzen oder erweitern.

Doch speziell für das Tastenfeldschloss gibt es noch einen weiteren entscheidenden Vorteil:

Das Tastenfeld wird direkt in eine vorgesehene Vertiefung der Trägerplatte (2.1.1) geklebt. Anschließend wird die Trägerplatte samt Tastenfeld von hinten in das Gehäuse eingesetzt und mit M3-Schrauben fixiert. Dabei verdeckt der Rahmen des Fensters im Gehäuse den Rand und die Kabel vollständig.

Sicherheitsaspekt: Das Fenster ist so dimensioniert, dass zwar der Rand und die Kabel verborgen bleiben, aber die Tasten vollständig sichtbar und bedienbar sind. Dadurch lässt sich das Tastenfeld nicht zerstörungsfrei entfernen – ein wichtiger Schutzmechanismus gegen Manipulation.

Befestigung der Komponenten auf der Trägerplatte

Auf der Rückseite (2.1.2) der Trägerplatte befinden sich diverse Befestigungsmöglichkeiten für die Elektronik:

M3-Gewinde für den Nano-Adapter (2.1.3) – Da Nano-Adapter im Internet oft unterschiedliche Lochabstände haben, gibt es auf der rechten Seite (2.1.2) ein zusätzliches Befestigungsgewinde zur flexiblen Anpassung. Falls die Bohrungen dennoch nicht exakt passen, lassen sie sich vorsichtig aufweiten – allerdings ohne dabei Leiterbahnen des Adapters zu beschädigen.

M2-Gewinde für den Nano R3 ATMEGA168P (2.1.4) – Eine alternative, kostengünstige Lösung anstelle eines Nano R3 mit Adapter.

M2-Gewinde für die Lochrasterplatte (20×80 mm, 1.1.2, 2.1.5) – Diese dient zur Energieverteilung und verbindet alle Stromversorgungsleitungen sauber an einem zentralen Punkt.

Die LED-Blende und ihre Befestigung

Die LED-Blende (2.2.1) wurde so konstruiert, dass sie von der Rückseite in den Schlitz (2.0.5) des Gehäuses eingeklickt wird. Der Radius an der Außenseite der LED-Blende entspricht dem Gehäuseradius, wodurch ein weicher Übergang entsteht und sich die Blende optisch nahtlos einfügt.

Die Montagebrücke (Vorderseite 2.2.2, Rückseite 2.2.3) muss ich nicht neu entwerfen, da ich sie bereits in anderen Projekten erfolgreich verwendet habe.

Die Befestigung der LEDs

Nun bleibt noch die Montage der drei WS2812b-LEDs (1.2.1). Warum genau drei LEDs benötigt werden, werde ich später im Programmierteil dieses Artikels erläutern.

Die Entwicklung des LED-Halters (SMD50, 2.2.4) war aufwendiger als erwartet. Natürlich könnte man die LED-Streifen einfach kleben, klemmen oder mit Heißkleber befestigen – doch das erschien mir zu unprofessionell.

Daher habe ich viel Zeit und Mühe investiert, um eine perfekte Halterung zu entwerfen. Das Resultat ist auf Bild 2.2.5 zu sehen.

Weiterführende Informationen:
Für Details zur Konstruktion gibt es einen eigenen Artikel auf NerdCorner.

3D-Druck der Bauteile

Nachdem die Konstruktion abgeschlossen ist, müssen die Teile nun gedruckt werden.

Materialwahl für die einzelnen Komponenten:

• Gehäuse (3.0.1): gedruckt mit ABS-Filament, bestehend aus Vorder- und Rückseite.
• Trägerplatte (3.0.2): gefertigt aus PLA-Filament.
• LED-Blende (3.0.3): stehend im Drucker hergestellt, gedruckt mit PLA+ in der Farbe „Natur“.
• LED-Klemmen (3.0.4): ebenfalls aus PLA+, gefertigt im selben Verfahren wie die LED-Blende.
• Brücke für die Hohlbuchse: gedruckt aus PLA-Filament, analog zur Trägerplatte.

Mit diesen Materialien sind die mechanischen und thermischen Eigenschaften der Bauteile optimal auf ihre jeweiligen Einsatzzwecke abgestimmt.

Nachbearbeitung der Bauteile

Nach dem Druck müssen sowohl die gedruckten Teile als auch einige Kaufteile bearbeitet werden.

1⃣ Säubern der 3D-Druckteile

• Entfernen von Stützmaterial und überstehenden Druckrückständen.

2⃣ Gewinde schneiden

• Gehäuse (4.0.1):
  • Vier M3-Gewinde (Achtung: Sacklöcher! Beim Schneiden vorsichtig vorgehen, um den Boden nicht nach außen zu drücken).
  • Zwei M2-Gewinde (4.0.2).
• Trägerplatte (4.0.3):
  • Die blau markierten M2-Gewinde müssen auf jeden Fall geschnitten werden.
  • Bei Verwendung eines Nano-Adapters mit Schraubklemmen (2.1.4) müssen zusätzlich die rot markierten M2-Gewinde geschnitten werden.

3⃣ Lochrasterplatte kürzen

• Die Lochrasterplatte (4.0.4) muss auf 8 bis maximal 10 Lochraster gekürzt werden.
• Wichtig: Die Montagelöcher sollten erhalten bleiben (siehe 4.0.5).

4⃣ Stiftleiste kürzen

• Die Stiftleiste mit einem Seitenschneider auf acht Pins kürzen (4.0.6).

Löten der Bauteile

Nun geht es ans Löten der Teile. Zuerst konzentrieren wir uns auf die Energieversorgungsplatine:

1⃣ Löten der Energieversorgungsplatine

• Lochrasterplatte (4.0.5): Lötung der Sockelleiste (1.1.1) und der Pin-Leiste (4.0.6).
• Pin-Leiste (4.1.2): Eine zweireihige Pin- und Sockelleiste wird aufgelötet. Auf der Rückseite verbinden wir die beiden Reihen jeweils mit Lötzinn.
  • Die Reihen unterscheiden sich in Männchen und Weibchen sowie in den Farben: Rot für Plus und Schwarz für Minus. Dies erleichtert den Anschluss der Energieversorgung.

2⃣ Verlötung der WS2812B LEDs

• Verlöten der Anschlüsse des WS2812B LED-Streifens (4.1.3).

3⃣ Verlöten der Hohlbuchse

• Zum Abschluss wird die Hohlbuchse (1.0.4) verlötet (4.1.4).
• Eine detaillierte Anleitung zum Verlöten der Hohlbuchse findest du in einem separaten Artikel. Es ist wichtig, die genaue Vorgehensweise zu kennen, um Fehler zu vermeiden.

Zusammenbau des Tastenfeldschlosses

1⃣ LED-Blende einbauen

• Zuerst klicke die LED-Blende (2.2.1) in das Gehäuse ein.
• Verklebe die LED-Blende an den vorgesehenen Stellen, wie auf den Bildern 5.0.1 und 5.0.2 abgebildet.

2⃣ Nano R3 einstecken

• Stecke den Nano R3 (1.0.2) in den Nano-Adapter (5.0.3) deiner Wahl ein.

3⃣ Nano-Adapter montieren

• Schraube den Nano-Adapter (1.0.3) mit dem eingesteckten Nano R3 (1.0.2) auf der Trägerplatte-Rückseite (4.0.3) fest.
• Verwende dafür die M3-Gewinde auf der Trägerplatte und die Schrauben (1.2.2), wie auf den Bildern 5.0.4 und 5.0.5 zu sehen.

4⃣ Energieversorgung anbringen

• Befestige die Energieversorgung (4.1.2) mit den Schrauben (1.2.4) an der Trägerplatte-Rückseite (4.0.3).
• Siehe dazu das Bild 5.0.6.

Montage des Tastenfelds auf der Trägerplatte

1⃣ Wahl der Schraubenlänge

• Achte darauf, wie auf Bild 5.1.1 dargestellt, die richtige Schraubenlänge zu wählen.
• Schrauben dürfen nicht zu lang sein, da sie sonst beim Anbringen des Tastenfelds aus der Klebefläche herausragen und das Tastenfeld nicht sauber aufgeklebt werden kann.

2⃣ Tastenfeld vorbereiten

• Entferne die Schutzfolie des Tastenfelds (1.0.1).
• Um die Folie zu entfernen, benutze ein Teppichmesser, um vorsichtig an einer Ecke zwischen Klebeschicht und Schutzfolie zu kommen (siehe 5.1.2).
• Nachdem du die Ecke erreicht hast, ziehe die ganze Schutzfolie ab (siehe 5.1.3).

3⃣ Tastenfeld aufkleben

• Setze das Tastenfeld (1.0.1) in die Vertiefung auf der Trägerplatte-Vorderseite (2.1.1) ein und drücke es fest an.
• Das Tastenfeld muss komplett versenkt werden und darf nicht über den Rand hinausstehen (siehe 5.1.4).
• Achte darauf, dass auch die Kabel in der Vertiefung liegen (siehe 5.1.5).

Verkabelung des Tastenfelds mit dem Arduino Nano R3

1⃣ Jumper-Kabel verwenden

• Jumper-Kabel (10 cm lang, Männchen-Männchen) werden verwendet, um das Tastenfeld mit dem Arduino Nano R3 zu verbinden (siehe 5.2.1).

2⃣ Anschluss der Kabel

• Achte darauf, dass du die Kabel nicht verdrehst, sondern nur biegst.
• Das linke Kabel wird an D2 des Arduino angeschlossen, und das rechte Kabel an D8.
• Insgesamt sind es sieben Kabel, die die Anschlüsse D2 bis D8 belegen (siehe 5.2.3).

3⃣ Pin-Leisten verwenden

• Da das Rastermaß des Arduino-Adapters und des Tastenfelds nicht übereinstimmen, kannst du Pin-Leisten verwenden, um die Verbindung herzustellen.

4⃣ Befestigung der LED-Klemmen

• Die Klammern (3.0.4) für die WS2812B LEDs werden an den LEDs festgeklickt.
• Am besten machst du das auf einer ebenen Oberfläche (siehe 5.2.4).

5⃣ Anbringen des LED-Streifens

• Der WS2812B Streifen wird nun mittig an der Oberseite der Trägerplatte aufgeschoben (siehe 5.2.5 Vorderseite und 5.2.6 Rückseite).

Zusammenbau der Trägerplatte und Gehäuse

1⃣ Verschrauben der Trägerplatte mit dem Gehäuse (5.3.1)

• Achte darauf, dass du M3 Schrauben verwendest, die nicht zu lang sind. Andernfalls könnten sie beim Anziehen eine Erhöhung in die Vorderseite des Gehäuses drücken.
• Die Ausrichtung der Trägerplatte im Gehäuse ist wichtig: Der LED-Streifen sollte auf der gleichen Seite wie die LED-Blende sein.
• Nach dem Verschrauben sollte das Tastenfeld leicht an den inneren Rahmen des Gehäuses gepresst sein (siehe 5.3.2 und 5.3.3).

2⃣ Vormontage der Hohlbuchse für die Notstromversorgung

• Für die Notstromversorgung musst du die Hohlbuchse vormontieren und an das Gehäuse schrauben.
• Die Hohlbuchse mit Brücke und Mutter wird in Bild 5.3.4 dargestellt.
  • Stecke die Hohlbuchse in die runde Vertiefung der Brücke.
  • Kontere die Hohlbuchse mit der Mutter auf der anderen Seite der Brücke.

3⃣ Befestigung der Hohlbuchse im Gehäuse

• Die Hohlbuchse mit der Brücke wird dann an die im Gehäuse vorgesehenen Haltesäulen mit M2 Schrauben verschraubt (siehe 5.3.5 und 5.3.6).

Anschluss der Kabel und Fertigstellung der Stromversorgung

1⃣ Anschluss des Steuerkabels für den Servomotor

• Das Steuerkabel für den Servomotor wird an Pin D9 des Nano R3 angeschlossen (5.4.1).

2⃣ Anschluss der Stromversorgung für den Nano R3

• Die Stromversorgung des Nano R3 wird an den GND-Pin und den VIN-Pin des Nano R3 angeschlossen (5.4.2).

3⃣ Anschluss des Steuerkabels für den WS2812B

• Das Steuerkabel für den WS2812B LED-Streifen wird an Pin D10 des Nano R3 angeschlossen (5.4.3).

4⃣ Verkabelung des Stromverteilers

• Alle restlichen Kabel müssen an den Stromverteiler angeschlossen werden:
  • Servomotor-Anschluss
  • Arduino Nano R3
  • WS2812B LED-Streifen
  • Hohlbuchse Alle Verbindungen erfolgen mit Plus und Minus (siehe 5.4.4 und 5.4.5).

5⃣ Verwendung von unterschiedlichen Farben und Anschlussarten für die Verkabelung

• Es hilft, unterschiedliche Kabel-Farben zu verwenden:
  • Rot für Plus
  • Schwarz für Minus
• Der Stromverteiler hat unterschiedliche Anschlussarten:
  • Männlich für Plus
  • Weiblich für Minus

6⃣ Hinweis zur Hohlbuchse

• Zur Verkabelung und Anschluss der Hohlbuchse gibt es einen eigenen Artikel, den du unbedingt lesen solltest

7⃣ Anbringen der Stecker-Gehäuse für den Servomotor und die Energieversorgung

• Für den Servomotor-Anschluss wird ein drei-poliger Stecker benötigt.
• Für die externe Energieversorgung wird ein zwei-poliger Stecker benötigt.
  • Weitere Details zum Konstruktionsprozess und den Download-Links für Stecker-Gehäuse findest du hier.

Im Bild 5.5.1 ist nochmal die ganze Verkabelung dargestellt.

Arduino Code

Nach der intensiven Arbeit mit der Hardware und dem 3D-Drucker widmen wir uns nun der Strategie und der Programmierung des Tastenfeldschlosses. Warum ist eine Strategie für ein Tastenfeldschloss wichtig? Eine durchdachte Handlungsabfolge – also die Reihenfolge, in der das Tastenfeldschloss bedient wird, welche Ereignisse sich aus bestimmten Aktionen ergeben und welches Ziel verfolgt wird – bildet die Grundlage für eine funktionale Steuerung. Dieser Leitfaden ist daher auch entscheidend für die Programmierung des Tastenfeldschlosses: Er legt fest, was wann passieren soll und welche Hardware dabei zum Einsatz kommt. Ziel ist es, eine logische und nachvollziehbare Abfolge von Ereignissen zu schaffen, die in diesem Fall auch optisch nachzuvollziehen ist.

Beispiel 1:
Das Tastenfeldschloss soll anzeigen, wie viele Stellen bereits eingegeben wurden. (Siehe Bilder 7.0.1 bis 7.0.4)

Beispiel 2:
Das Tastenfeldschloss soll nach Betätigung einer bestimmten Taste mitteilen, ob das eingegebene Kennwort korrekt ist. (Siehe Bild 7.0.5)

Beispiel 3:
Das Tastenfeldschloss soll anzeigen, wenn etwas falsch eingegeben wurde, wie etwa ein falsches Kennwort oder zu viele Tastenanschläge. (Siehe Bild 7.0.8)

Beispiel 4:
Das Tastenfeldschloss soll den aktuellen Zustand anzeigen. (Siehe Bilder 7.0.5 bis 7.0.7)

Kommen wir nun zur Programmierung des Tastenfeldschlosses, die sich in einigen Punkten von herkömmlichen Programmen im Internet unterscheidet. Zu Beginn werden die drei notwendigen Bibliotheken eingebunden: <Keypad.h> für das Tastenfeld, <Adafruit_NeoPixel.h> für die WS2812B LEDs und <Servo.h> für den Servomotor (Bild 6.0.1). Im folgenden Abschnitt wird die Pin-Belegung für die LEDs festgelegt, wobei Pin D10 verwendet wird und die Anzahl der LEDs sowie das Farbschema bestimmt werden. Ebenso wird die Helligkeit der LEDs festgelegt – dieser Wert kann je nach Standort angepasst werden, wobei höhere Werte für mehr Helligkeit sorgen (Werte von 0 bis 255). (Siehe Bild 6.0.2) Der dritte Abschnitt widmet sich der Beschreibung des verwendeten Tastenfelds, einschließlich der Anzahl der Reihen und Spalten sowie der Belegung der Tasten. (Siehe Bild 6.0.3)

Im vierten Abschnitt wird der Servomotor konfiguriert, indem der Gradbereich festgelegt wird, den er zurücklegen kann, sowie die Geschwindigkeit, mit der er sich bewegen soll (siehe Bild 6.1.1). Anschließend folgt der Abschnitt zur Kennworteingabe. Hier habt ihr die Möglichkeit, das Standardkennwort 1516 zu ändern, um ein neues vierstelliges Kennwort festzulegen. Das Programm funktioniert nur korrekt, wenn ein vierstelliger Code eingegeben wird. In diesem Abschnitt wird außerdem der Steuer-Pin für den Servomotor auf D9 gesetzt (siehe Bild 6.1.2). Der darauf folgende Abschnitt widmet sich der Festlegung der Farben für die verschiedenen Ereignisse.

In den letzten beiden Abschnitten wird das Verhalten des Tastenfeldschlosses bei bestimmten Handlungen erläutert. Diese Beschreibung stellt natürlich nur einen groben Überblick über das Programm dar. In einem zukünftigen Artikel für Tastenfeldschloss Version 2 werden wir dann das Programm detaillierter und umfassender erklären.

//==========================================Librarys==============================================================
#include <Keypad.h>
#include <Adafruit_NeoPixel.h>
#include <Servo.h>
//========================================Neo-Pixel==============================================================
#define LED_PIN 10
#define LED_COUNT 3
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
int led_strength = 75; //controlls Brighttness (0 - 255)
//========================================Keypad=================================================================
const byte rows = 4;
const byte cols = 3;
char keys[rows][cols] = {
 {'1', '2', '3'},
 {'4', '5', '6'},
 {'7', '8', '9'},
 {'*', '0', '#'}
};
byte rowPins[rows] = {8, 7, 6, 5};
byte colPins[cols] = {4, 3, 2};
Keypad keypad = Keypad( makeKeymap(keys), rowPins, colPins, rows, cols );
//=========================================Servo============================================================
Servo lock;
int pos = 0;
int servo_angle = 180;
int servo_speed = 15;
//======================================Password===============================================================
String input;
const String password = "1516"; //Set Password
int n = 1;

 

void setup() {
 input.reserve(password.length() +2);
 strip.begin();
 strip.show();
 lock.attach(9); //motor pin
}

void loop() {
//-------------------colours------------------------------------------------------------------- 
 uint32_t blue = strip.Color(0, 0, led_strength);
 uint32_t green = strip.Color(0, led_strength, 0);
 uint32_t red = strip.Color(led_strength, 0, 0);
 uint32_t orange = strip.Color(led_strength, led_strength/2, 0);

 char key = keypad.getKey();

if (key != NO_KEY) {
//-------------------------End conditions------------------------------------------------------
 if (key == '#') {
 if (input == password) {
 //unlock
 strip.clear();
 strip.fill(green, 0, LED_COUNT);
 strip.show();
 for (pos = 0; pos <= servo_angle; pos += 1) {
 lock.write(pos);
 delay(servo_speed );
 }
 while (1 == 1)
 { char key = keypad.getKey();
 strip.clear();
 strip.fill(orange, 0, LED_COUNT);
 strip.show();
 if (key == '*')
 {
 strip.clear();
 strip.fill(green, 0, LED_COUNT);
 strip.show();
 break;
 }
 }

 for (pos = servo_angle; pos >= 0; pos -= 1) {
 lock.write(pos);
 delay(servo_speed );
 }
 n = 1;
 input = "";
 delay (1000);
 strip.clear();
 strip.show();
 } else {
 //wrong password
 strip.clear();
 strip.fill(red, 0, LED_COUNT);
 strip.show();
 n = 1;
 input = "";
 delay (1000);
 strip.clear();
 strip.show();
 }
 }
 else if (n == password.length() + 1) {
 //Input too long
 strip.clear();
 strip.fill(red, 0, LED_COUNT);
 strip.show();
 n = 1;
 input = "";
 delay (1000);
 strip.clear();
 strip.show();
 }
//----------------------------------Buttons------------------------------------------
 else {
 input += key;
 if (n == password.length() ) {
 strip.clear();
 strip.fill(blue, 0, LED_COUNT); 
 strip.show();
 n++;
 }
 else {

 strip.clear();
 strip.setPixelColor(n-1, blue);
 strip.show();
 n++;
 }
 }
 }

}

Funktion

Die Bedienung des Tastenfeldschlosses ist sehr intuitiv. Sobald die erste Taste gedrückt wird, leuchtet die rechte LED blau (7.0.1). Beim zweiten Tastendruck wird die mittlere LED blau (7.0.2). Nach der dritten Taste strahlt die linke LED in Blau (7.0.3). Mit der vierten Taste leuchten schließlich alle drei LEDs blau (7.0.4). Wenn diese drei LEDs in Blau leuchten, weiß der Benutzer, dass die #-Taste gedrückt werden muss.

Wird die #-Taste betätigt, erfolgt die Überprüfung des Passworts. Ist das Passwort korrekt, leuchten alle drei LEDs gleichzeitig grün, und der Servomotor wird aktiviert (7.0.5). Das grüne Licht bleibt so lange an, wie der Servomotor seine Endlage (offen) noch nicht erreicht hat. Sobald der Servomotor die Endlage (offen) erreicht, wechseln die LEDs von Grün zu Orange (7.0.6). Die orange Farbe bleibt so lange erhalten, bis der Benutzer die *-Taste drückt.

Nach dem Drücken der *-Taste wechseln die LEDs wieder auf Grün (7.0.7) und bleiben in dieser Farbe, bis der Servomotor die Endlage (geschlossen) erreicht hat. Ist dies der Fall, erlöschen die LEDs, und das Tastenfeldschloss ist bereit für neue Eingaben.

Falls jedoch das Passwort nach dem Drücken der #-Taste in Schritt 7.0.4 falsch ist, leuchten alle drei LEDs rot (7.0.8). Ebenso wird das rote Licht angezeigt, wenn mehr als vier Tasten, abgesehen von der #-Taste, gedrückt werden.

Türmontage

Natürlich ist diese Variante nicht für den Einsatz an einer gewöhnlichen Tür gedacht, bei der man einfach hindurchgeht und die Tür sich von selbst wieder schließt. Der Grund dafür liegt im offenbleiben des Schlosses, bis die *-Taste gedrückt wird. Doch wie kann man die *-Taste drücken, wenn man sich auf der anderen Seite des Tastenfeldschlosses befindet, hinter der Wand? Eine Verzögerung im Programm könnte zwar helfen, aber wer weiß schon, wie lange man braucht, um die Tür zu passieren und hinter sich zu schließen? Eine viel sinnvollere Lösung wäre es, einen zusätzlichen Schalter zu implementieren, der auf der anderen Seite der Tür angebracht wird. Dieser Schalter würde, ohne eine Passworteingabe, bei Betätigung direkt zu Punkt 7.0.6 führen und das Schloss öffnen, sodass die Tür von innen geöffnet werden kann.

Doch das ist Zukunftsmusik. Nun kommen wir zur Montage des Tastenfeldschlosses an einer Tür. Hierfür habe ich auf der Rückseite des Gehäuses vier Bohrungen vorgesehen. Diese Bohrungen haben an der Innenseite eine Vertiefung für herkömmliche Sechskantmuttern M4 DIN 934. Die entsprechenden Bohrungen sind in Bild 8.0.1 (Rückansicht) und Bild 8.0.2 (Vorderansicht) zu sehen, wobei das Gehäuse zur besseren Anschauung etwas transparent dargestellt ist. Die Installation der Muttern ist denkbar einfach: Nachdem sichergestellt wurde, dass sämtliches Supportmaterial entfernt ist, wird die Mutter von hinten in die vorgesehene Vertiefung gedrückt. Es sollten keine Einpressmuttern verwendet werden, da diese unnötig teuer sind.

Für die Befestigung an der Wand oder Tür habe ich eine Bohrschablone entwickelt (Bild 8.0.3). Diese Schablone enthält an den vier Ecken jeweils eine Bohrung mit einem Durchmesser von 4 mm. Der Abstand der Bohrungen entspricht dem Abstand der Bohrungen am Gehäuse. Man kann die Schablone bequem an der Oberfläche der Tür fixieren, zum Beispiel mit Klebeband (Bild 8.0.4). So spart man sich das mühsame Anreißen der Bohrlöcher und vermeidet Fehler.

Auf Bild 8.1.1 sehen wir die gebohrten Montagelöcher von der Vorderseite, markiert durch magentafarbene Kreise. Dank der Bohrschablone haben diese Löcher den richtigen Abstand zueinander. Falls beim Bohren die Position leicht verrutscht oder nicht ganz exakt eingehalten wurde, stellt das kein Problem dar. In diesem Fall kann man die Montagelöcher einfach etwas größer bohren, um das Tastenfeldschloss beim Anschrauben präzise auszurichten. Zusätzlich sind auf diesem Bild in gelben Kreisen zwei Bohrungen zu sehen, die leider etwas am Rand ausgebrochen sind. Diese Bohrungen sind für das Kabel des Servos und die Energieversorgung vorgesehen. Nachdem die Bohrungen fertiggestellt waren, habe ich das Tastenfeldschloss angebracht und die Kabel zuvor durch die vorgesehenen Bohrungen auf der Rückseite der Tür (Bild 8.1.2) geführt.

Die gesamte Montagearbeit des Tastenfeldschlosses ist auf der Vorderseite der Tür in Bild 8.2.1 zu sehen. Wer mit dieser Montagelösung nicht zufrieden ist, kann ich beruhigen: Als letzten Schritt habe ich einen Rückendeckel entworfen, der es ermöglicht, das Tastenfeldschloss an einer Wand oder einem Rahmen zu befestigen (Bild 8.2.2). Dazu steckt man einfach das Gehäuse des Tastenfeldschlosses auf den Rückendeckel und verschraubt es von hinten mit M4 Senkkopfschrauben (markiert durch magentafarbene Kreise in Bild 8.2.2). Danach wird das ganze Konstrukt an der Wand befestigt, wofür zwei Laschen mit jeweils zwei Bohrungen zur Verfügung stehen (gelbe Kreise in Bild 8.2.2).

Nicht zu vergessen ist, dass man am Gehäuse zusätzlich eine oder mehrere Bohrungen für die Kabel des Servos und der Energieversorgung anbringen muss. Dabei sollte man auch das Sicherheitsrisiko bedenken, dass eine unbefugte Person das Tastenfeldschloss über die zugänglichen Schrauben abschrauben könnte.

Schließmechanismus

Wer jetzt noch einen echten Schließmechanismus vermisst, der nicht nur einen Servo-Anschluss nutzt, kann sich auf den „Schließer“ freuen, der sich bereits in der Entwicklung befindet und in den kommenden Versionen des Tastenfeldschlosses präsentiert wird.

Die Entwicklung des Tastenfeldschlosses war eine spannende, aber auch herausfordernde Aufgabe. Besonders hervorzuheben sind einige Eigenschaften der VERSION 1 des Tastenfeldschlosses:

• Verschiedene Arduino Nano-Modelle und Adapter können verwendet werden – Flexibilität bei der Hardwarewahl.
• Optisches Feedback – Über die Zahleneingabe und den Status des Tastenfeldschlosses wird der Benutzer direkt informiert.
• Notstromversorgung über Hohlbuchse – Garantiert zuverlässige Funktion im Falle von Stromausfällen.
• Stabiles Programm – Die Software wurde so entwickelt, dass sie zuverlässig funktioniert.
• Optimale Haptik für Links- und Rechtshänder – Das Tastenfeldschloss wurde ergonomisch gestaltet, um allen Nutzern gerecht zu werden.

Dateien zum Herunterladen

• Tastenfeldschloss Gehäuse

The post DIY Tastenfeldschloss – 3D Druck und Programmierung appeared first on Nerd Corner.

Das könnte dich ebenfalls interessieren: Swagger zu Node Server hinzufügen

Schritt 1: NestJS auf Vercel hosten

Das Wichtigste zuerst: Die Grundeinstellungen für die Bereitstellung auf Vercel. Vercel ist großartig für Serverless, aber die Arbeit mit NestJS benötigt ein paar Anpassungen. Die Hauptsache ist, eine vercel.json-Konfigurationsdatei einzurichten, die Vercel genau sagt, wie die App zu behandeln ist.

Hier ist die Endkonfiguration:

{
  "version": 2,
  "builds": [
    {
      "src": "src/main.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/main.ts",
      "methods": [
        "GET",
        "POST",
        "PUT",
        "PATCH",
        "OPTIONS",
        "DELETE",
        "HEAD",
        "CONNECT",
        "TRACE"
      ]
    }
  ]
}

Ich habe daraufhin in Vercel folgende Fehlermeldung erhalten:

This Serverless Function has crashed. Your connection is working correctly. 
Vercel is working correctly. 500: INTERNAL_SERVER_ERROR 
Code: FUNCTION_INVOCATION_FAILED ID: bom1::sgk4v-1711014022883-1e9ed54f4c37

Bei einem Blick in die Logs stellte ich fest, dass die Datenbankverbindung ein Problem darstellte und außerdem die folgende Logmeldung angezeigt wurde:

No exports found in module "/var/task/app-name/src/main.js".
Did you forget to export a function or a server?

Es stellte sich heraus, dass ich den zweiten Teil der Fehlermeldung ignorieren und mich nur auf die Datenbankverbindung konzentrieren musste.

Schritt 2: Konfigurieren der Datenbank

Für meine Anwendung habe ich eine mysql-Datenbank mit mehreren Schemata verwendet. Ich habe mehrere kostenlose Angebote ausprobiert, aber sie waren nicht mit dem Ansatz mehrerer Schemata kompatibel. Daher habe ich mich für das Hosting bei Google Cloud entschieden. Ich habe es auf einen Preis von 0,01 $ pro Stunde heruntergeschraubt und das 300 $-Einsteigerangebot genutzt.

Um Vercel eine Verbindung zu ermöglichen, musste in der Konfiguration von Google Cloud die IP-Adresse auf 0.0.0.0/0 gesetzt werden, so dass die Datenbank von jeder IP-Adresse aus zugänglich war.

Schritt 3: Umgang mit CORS

Die CORS Fehler haben auch für einige Kopfschmerzen gesorgt. Stelle sicher, dass OPTIONS für CORS Preflight-Anfragen zugelassen wird, da Vercel eine explizite Erlaubnis für Cross-Origin-Anfragen benötigt. Am Ende musste ich eine Menge Header hinzufügen, um sicherzustellen, dass die Anfragen erlaubt waren:

app.enableCors({
    origin: 'domain-name',
    credentials: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    allowedHeaders: [
      'Origin',
      'X-Requested-With',
      'Content-Type',
      'Accept',
      'Authorization',
    ],
  });

Schritt 4: Umstellung auf express-session und Redis für die Sitzungsverwaltung

Einer der kniffligsten Teile war die Sessions zum Laufen zu bringen. Ich begann mit der cookie-session Bibliothek, aber Vercel ignoriert sie komplett. Nach einem Blick in die Dokumentation und einigem Ausprobieren wechselte ich zur express-session Bibliothek, da sie populärer ist und besser mit Vercels serverloser Umgebung funktioniert.

Aus irgendeinem Grund muss die Import-Syntax genau so aussehen:

import session = require('express-session');

Außerdem musste ich die Sitzungsmiddleware mit aktiviertem Vertrauensproxy konfigurieren, da Vercel Anfragen proxifiziert. So sieht die Einstellung aus:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

Auch die Einstellung secure: true und sameSite: ’none‘ war wichtig, um sicherzustellen, dass Cookies über HTTPS und verschiedene Domainanfragen funktionieren!

Beachten, dass mit Vercel mehrere serverlose Instanzen Anfragen bearbeiten können, was bei parallelen Anfragen leider zu Sitzungskonflikten führt. Um dies zu beheben, habe ich meinen Sitzungsspeicher mit einer Redis-Instanz verbunden. Glücklicherweise war das super einfach.

Redis hält die Sitzungsdaten konsistent und vermeidet Konflikte zwischen Anfragen, insbesondere unter Last. Hier der Code:

const expressApp = app.getHttpAdapter().getInstance();
expressApp.set('trust proxy', true);

const redisClient = createClient({
    password: process.env.REDIS_PASSWORD,
    socket: {
      host: process.env.REDIS_HOST,
      port: parseInt(process.env.REDIS_PORT, 10),
    },
  });

  redisClient
    .connect()
    .catch((err) =>
      console.log('Could not establish a connection with Redis: ' + err),
    );

  redisClient.on('error', (err) => console.log('Redis error: ' + err));
  redisClient.on('connect', () =>
    console.log('Connected to Redis successfully'),
  );

  app.use(
    session({
      store: new RedisStore({ client: redisClient }),
      secret: process.env.COOKIE_SECRET,
      cookie: {
        secure: process.env.NODE_ENV !== 'development',
        sameSite: process.env.NODE_ENV === 'development' ? 'lax' : 'none',
        maxAge: 86400000,
      },
    }),
  );

Schritt 5: Hinzufügen von withCredentials im Frontend

Dieser Schritt ist nur eine Randnotiz: Damit Session-Cookies zwischen Frontend und Backend funktionieren, muss withCredentials in den HTTP-Anfragen meines Frontends auf true gesetzt werden. Dies ermöglicht die Einbeziehung von Cookies in herkunftsübergreifende Anfragen, was wichtig ist, wenn das Frontend und das Backend getrennt gehostet werden. Ich musste sicherstellen, dass der HTTP-Client von Angular diese Einstellung aktiviert hat.

Schritt 6: Schriftart hinzufügen

Um Schriftdateien in Ihr NestJS-Projekt einzubinden, muss man die CompilerOptions in der nest-cli.json-Datei verwenden, um Assets für die Build-Ausgabe zu definieren, z. B. durch die Angabe von „include“: „**/*.ttf“ und ‚outDir‘: „dist/src“.

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [
      {
        "include": "**/*.ttf",
        "outDir": "dist/src"
      }
    ],
    "deleteOutDir": true
  }
}

Anschließend kann man nach dem Build die Schriftarten im Code mit path.resolve referenzieren, z. B. path.resolve(__dirname, ‚../fonts/Roboto-Regular.ttf‘). Auf diese Weise wird sichergestellt, dass die Schriftartendateien mit dem Build gebündelt werden und während der Laufzeit zugänglich sind.

Schlussgedanken zum Thema NestJS auf Vercel hosten

Das Deployment meiner NestJS-App auf Vercel war eine wahre Achterbahnfahrt. Manchmal hatte ich das Gefühl, dass ich kurz davor war, alles perfekt zum Laufen zu bringen, nur um dann mit neuen Fehlern konfrontiert zu werden, die mich zurück in den Fehlersuch-Modus schickten. Es gab Momente der Frustration – vor allem im Zusammenhang mit der Sessionverarbeitung und CORS-Problemen. Aber jede Lösung brachte ein neues Hoch, und jeder behobene Fehler fühlte sich wie ein kleiner Sieg an.

Jetzt, wo endlich alles reibungslos funktioniert, kann ich sagen, dass es ein großartiges Gefühl ist. Wenn ich sehe, dass meine Anwendung so funktioniert, wie ich es mir vorgestellt habe, ist das all die Kopfschmerzen wert. Es ist eine große Erleichterung, aber noch mehr freut es mich, zu wissen, dass ich jede Hürde überwunden habe und auf das, was ich gelernt habe, zurückblicken kann. Ich hoffe, dieser Leitfaden kann anderen einige dieser Schwierigkeiten ersparen und helfen, diesen „Es funktioniert einfach“-Moment etwas schneller zu erreichen!

The post Erfahrungen aus der Praxis: NestJS auf Vercel hosten appeared first on Nerd Corner.

Ich sehe leider sehr oft Blogartikel in denen der HTML Code in der Arduino Datei eingebettet wird. Sowas kann man für eine Mini Demonstration zwar machen, ist aber im Alltag völliger Schwachsinn. Es ist viel zu unübersichtlich und sobald das Projekt wächst nicht mehr nutzbar.

Die ordentliche Alternative ist einen Ordner namens „data“ einzurichten und in diesem die Webseiten als html Dateien abzulegen. Zusätzlich wird das Styling als CSS Datei gespeichert und es können sogar Funktionen per JavaScript Datei ausgeführt werden. Also alles 1:1 wie auf einem gewöhnlichem Webserver!

Das könnte dich auch interessieren: WeMos D1 R2 erste Schritte und Wlan Integration

Liste der Komponenten

• Arduino IDE (Entwicklungsumgebung)
• WeMos D1 R2

Das Einrichten des Dateisystems (offiziell SPIFFS) geschieht einmalig und ist kinderleicht:

(Zunächst sollte man die grundlegende Einrichtung aus dem ersten Teil abgeschlossen haben!)

1. Auf GitHub eine Kopie der Datei „ESP8266FS-0.2.0.zip“ herunterladen und entpacken
2. Die Datei esp8266fs.jar im Arduino-Tool-Verzeichnis ablegen. Der Pfad sieht etwa so aus: [home_dir]\Arduino\tools\ESP8266FS\tool\esp8266fs.jar (Siehe Bild) Ich musste den Pfadteil tools\ESP8266FS\tool\ im Arduino Ordner selbst erstellen.
3. Die Arduino IDE neustarten.

Das wars auch schon! Man kann jetzt in der Arduino DIE unter Tools den neuen Punkt „ESP8266 Sketch Data Upload“ sehen.

Wie kann man das neue Dateisystem jetzt nutzen?

1. Erstellen Sie in ihrem aktuellen WeMos Projekt Ordner einen zusätzlichen Ordner mit dem Namen „data“. So wie in dem nachfolgendem Bild

2. Legen Sie die Dateien, die Sie hochladen möchten, in das ‚data‘-Verzeichnis
3. Wählen Sie in der Arduino IDE im Menü ‚Tools‘ den WeMos aus und wählen Sie eine Größe bei ‚Flash Size‘
4. Das Dialogfeld für den seriellen Monitor schließen!
5. Wählen Sie aus dem Menü ‚Tools‘ die Option ‚ESP8266 Sketch Data Upload‘.

Sobald der Upload abgeschlossen ist zeigt das Nachrichtenfenster der Arduino IDE 100% Upload an.

WeMos Beispielprogramm zum Ein- und Ausschalten der OnBoard LED

Ähnlich wie im ersten Teil wird der Webserver die OnBoard LED steuern. Als Basis dient ebenfalls der Code aus dem ersten Teil. Der überarbeitete Code sieht so aus:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");


  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.serveStatic("/", SPIFFS, "/", "max-age=86400");
  SPIFFS.begin();

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Landing page not found! Don't forget to name your landing page 'index.html'!");  
  });
 
  server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
    }
    server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

  server.begin();
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  server.handleClient();
  MDNS.update();

}

void switchLedOff(){ 
  digitalWrite(LED_BUILTIN, HIGH);   // turn the D1 LED off 
}

void switchLedOn(){ 
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED on 
}

Auf ein paar Besonderheiten möchte ich dabei hinweisen. Wir haben beispielsweise folgendes hinzugefügt:

server.serveStatic("/", SPIFFS, "/", "max-age=86400"); 
SPIFFS.begin();

Ohne die beiden Zeilen wäre der Zugriff auf die Dateien im „data“ Ordner nicht möglich. Bitte beachten, dass der Name „index.html“ als default für die Landing Page eingestellt ist. Wenn man unbedingt möchte kann man das aber auch ändern.

server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
      }
      server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

Der „/led“ Endpoint empfängt die Befehle vom Webserver. Lautet der Befehl „on“ wird die LED eingeschaltet und bei „off“ wird die LED ausgeschaltet.

Wemos Webseite zum Ein- und Ausschalten der WeMos OnBoard LED

Die Beispielwebseite ist ganz einfach aufgebaut. Sie besteht in erster Linie aus 2 Buttons zum Ein- und Ausschalten der LED.

Die Ordnerstruktur der Webseite ist sehr übersichtlich gehalten. Es gibt eine Hauptseite mit dem Namen „index.html“ Dieser Name ist weltweit üblich für die Hauptseiten und wird auch automatisch vom WeMos entsprechend erkannt. Darüber hinaus einen „CSS“ Ordner fürs Styling und einen „JS“ Ordner für Funktionen.

Im Header Bereich der Webseite verlinken wir die Styles. Da wäre zum einen ein Standard Bootstrap, der alles automatisch bischen schöner macht und zusätzlich eine custom Styles Datei mit meinen eigenen Anpassungen. Außerdem werden im Header Bereich auch die Funktionen der Webseite verlinkt. Ich benutze den jQuery Standard um von der Webseite Requests an den WeMos zu senden. Meine eigenen custom Funktionen liegen in der „index.js“.

Bitte beachten, dass die jQuery Datei VOR der eigenen Datei eingebunden werden muss, sonst können keine jQuery Befehle im eigenen Code benutzt werden! Die eigenen Funktionen werden anschließend von den Buttons verwendet. Der HTML Code der Seite sieht insgesamt folgendermaßen aus:

<!DOCTYPE html>
<html lang="en"></html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/custom-style.css" />
    <title>D1 Webserver</title>
  </head>
  <body>
    <h1>D1 Webserver with filesystem</h1>
    <p>
      This is an example for a WeMos Webserver with a filesystem. You can easily
      create webpages with html, css and js!
    </p>

    <h3>Example to turn on and off the built in LED</h3>
    <button class="button-style" onclick="changeLEDState('on')">Turn on</button>
    <button class="button-style" onclick="changeLEDState('off')">
      Turn off
    </button>

    <h3>Example to demo a JS function</h3>
    <button class="button-style" onclick="showAlert()">Show alert</button>
  </body>
</html>

Besonderes Augenmerk gilt der JavaScript Funktion „changeLEDState(value)“

function changeLEDState(value) {
  $.post("/led", { ledstate: value });
}

Dadurch, dass jQuery genutzt wird für die Kommunikation mit dem WeMos, reicht ein einfaches Dollarzeichen mit dem entsprechendem Request Befehl. Bei diesem POST Request wird ebenfalls ein Wert mit geschickt, welcher entweder „on“ oder „off“ ist zum ein- und ausschalten der LED.

Die Webseite kann nachfolgend als zip Datei heruntergeladen werden.

Dateien zum Herunterladen

• Wemos example webserver to control OnBoard LED

The post WeMos D1 R2 – Ganze Webseite mit html, css & js hosten appeared first on Nerd Corner.

In meiner Werkstatt wird einiges geschraubt und dabei verwende ich am häufigsten Bits in den Varianten Torx, Innensechskant und Kreuzschlitz. Ich kaufe diese Bits immer in 10er oder 25er Packungen, weil die günstiger sind und ich gerne einen kleinen Vorrat habe. Beim Werkzeug gehts mir da ähnlich, deshalb habe ich beschlossen ein paar Bit-Adapter zu konstruieren und 3D zu drucken.

Das könnte dich auch interessieren: 3D gedruckter Batteriebehälter

Vorgehensweise

Als erstes habe ich Ordnung in meinen Steckschlüsselkoffern gebracht um herauszufinden welche Adapter tatsächlich benötigt werden. Bei den gängigsten Vierkantgrößen für Steckschlüssel handelt es sich um:

• ¼“ gleich 6,35 mm
• 3/8″ gleich 9,52 mm
• ½“ gleich 12,7 mm

Im Bild 2.0 habe ich einige Vierkantaufnahmen zusammengestellt. Bei Bild 2.0.1 handelt es sich um einen Sechskant Schaft ¼“ mit drei unterschiedlichen Vierkantgrößen. Diesen Sechskant Schaft kann man gut in ein Dreibackenfutter einspannen welches üblicherweise bei einer Bohrmaschine oder Akkuschrauber genutzt wird. Im Bild 2.0.2 ist die Variante mit Handgriff dargestellt, bei dem am Schaftende der Vierkant sitzt. In 2.0.3 sieht man drei Gelenke mit unterschiedlichen Vierkantgrößen und Bild 2.0.4 zeigt ein sogenanntes „Federndes Druckstück“. Das federnde Druckstück hat die Aufgabe beim Einführen in das Gegenstück sich zurück zu ziehen und in der Endposition in die vorgesehene Kerbe oder Rille im Gegenstück einzurasten. Dies gewährleistet einen besseren Halt beider Teile in der Verbindung. Die Stelle des federnden Druckstücks am Vierkant, habe ich mit roten Kreisen an einigen Vierkanten exemplarisch markiert. Mir ist es wichtig die Funktion zu erklären, da in der Konstruktion des Adapters eine andere Lösung realisiert wird.

CAD Konstruktion des Bit-Adapter

Die Realisierung am CAD geht eigentlich recht schnell von statten. Die Masse für die Tiefe des Vierkants auf der einen Seite und die Einstecktiefe des Sechskants auf der anderen Seite des Adapters wird an den Schäften gemessen. Bild 3.0.1 zeigt am Vierkant die Fläche (rot) die in den Adapter geschoben wird, welche gleich der Fläche im Bild 3.0.2 am Sechskant (schwarz) ist. Beim Bild 3.0.3 habe ich einen Schnitt gemacht und die Schnittfläche grün markiert. Die Platzierung der beiden Schäfte wird anhand der Farben dargestellt.

Für die Außenmaße der Adapter sind ausschließlich die Vierkant-Dimensionen ausschlaggebend. Da die Vierkantschäfte immer größer werden muss natürlich auch der Außendurchmesser des Adapters angepasst werden. Bei dem ½“ Adapter (4.0.3) habe ich deshalb eine Stufe angebracht. Es ist schließlich beim Sechskant genügend Material vorhanden, da er sich nicht verändert. Die Aussparungen oder auch Taschen an den Mantelflächen sind keine Showeinlage. Sie dienen einerseits der Stabilität des Adapters und sparen Material. An allen Adaptern sind die beiden Gewinde gleich. Die M3 Gewinde dienen zum optionalen klemmen der Schäfte.

Ich verwende Stiftschrauben mit Innensechskant, die am Ende flach sind um die Oberfläche der Schäfte nicht zu beschädigen. Man kann auch normale Schrauben verwenden, wenn sie einen nicht stören. Den Sitz oder Position der Gewinde sieht man beim Bild 3.0.3 in der Schnittdarstellung.

Exkurs federnde Druckstücke: Die federnden Druckstücke wurden bereits in Bild 2.0.4 erwähnt. Schon seit einigen Jahren versuche ich sie in Kunststoff zu verwenden und musste immer wieder feststellen, dass es nicht funktioniert. Es ist leichter die Klemmung mit Schrauben zu gestalten und funktioniert  garantiert!

Zum Schluss werden die Bit-Adapter gedruckt und gesäubert und die M3 Gewinde geschnitten. In den Bildern unter 5.0 sieht man an paar Beispiele für die Verwendung der Adapter.

Anmerkung

Die Bit-Adapter sind natürlich nur für den Einsatz unter 15Nm geeignet. Diesen Wert habe ich mit Karbonfaser verstärktem Filament locker erreicht. Bei höheren Werten besteht Bruchgefahr und daher auch Verletzungsgefahr!

Dateien zum Herunterladen

• Adapter 3/8″ zu  ¼“

The post 3D gedruckter Bit-Adapter Vierkant/Sechskant appeared first on Nerd Corner.

Das könnte dich auch interessieren: NLP Anwendung Teil 1 (Daten einlesen, Daten vorbereiten und Tokenisierung)

OOV Token

Bei einem Übersetzer ist es nur eine Frage der Zeit bis ein unbekanntes Wort eingegeben wird. Das kann ein Eigenname, ein Rechtschreibfehler oder ähnliches sein. Es empfiehlt sich daher das Modell auch im Hinblick auf unbekannte Wörter zu trainieren. Hierfür wird ein OOV Token benötigt. OOV steht für „out of vocabulary“. Während des Trainings lernt das Modell, diesen Token zu erzeugen oder entsprechend zu behandeln. In diesem Fall kann ein unbekanntes Wort durch den Token „<oov>“ ersetzt werden, bevor es an das Modell übergeben wird. Das Modell wird es dann wie jedes andere Token behandeln und eine Antwort auf der Grundlage seines gelernten Verhaltens generieren.

Jetzt fragt man sich vielleicht wie inkludiert man diesen OOV Token in die Trainingsdaten? Ich mache das so, dass mein Datensatz zu Beginn automatisiert nach Wörtern durchsucht wird, die nur 1 Mal vorkommen. Diese seltenen Wörter ersetze ich dann durch „<oov>“, damit kann mein Modell lernen auch unbekannte Wörter zu reagieren.

Padding

Bei vielen Modellen des maschinellen Lernens, einschließlich neuronaler Netze, wird erwartet, dass die Eingaben eine feste Größe oder Form haben. Diese Anforderung ergibt sich aus der Struktur und dem Betrieb des zugrunde liegenden Berechnungsgraphen. Eingaben mit derselben Länge vereinfachen die Datenverarbeitungspipeline und ermöglichen eine effiziente Stapelverarbeitung.

Warum die Eingaben gleich lang sein sollten:

1. Matrix-Operationen: Neuronale Netze verarbeiten Eingaben in der Regel in Stapeln, und die Stapelverarbeitung ist am effizientesten, wenn die Eingabedaten eine einheitliche Form haben. Die Daten sind in Matrizen organisiert, wobei jede Zeile eine Eingabeinstanz darstellt. Um Matrixoperationen effizient durchführen zu können, müssen alle Eingabeinstanzen die gleiche Form haben.
2. Gemeinsame Nutzung von Parametern: In vielen neuronalen Netzwerkarchitekturen werden die Modellparameter (Gewichte) auf verschiedene Teile der Eingabesequenz verteilt. In rekurrenten neuronalen Netzen (RNNs) werden beispielsweise dieselben Gewichte für die Verarbeitung jedes Zeitschritts verwendet. Um die gemeinsame Nutzung von Parametern zu ermöglichen, müssen alle Eingabesequenzen die gleiche Länge haben.
3. Speicherzuweisung: Neuronale Netze weisen den Speicher oft auf der Grundlage der maximalen Länge der Eingabesequenzen zu. Wenn die Sequenzen unterschiedliche Längen haben, ist eine dynamische Speicherzuweisung erforderlich, die komplexer und weniger effizient sein kann.

Es ist zwar möglich, Eingaben mit variabler Länge durch Techniken wie Auffüllen und Maskieren zu verarbeiten, aber dies erhöht die Komplexität des Modells und kann zusätzliche Verarbeitungsschritte erfordern. Der Einfachheit und Effizienz halber ist es daher üblich, Sequenzen auf eine feste Länge aufzufüllen oder abzuschneiden, bevor sie in ein neuronales Netzmodell eingespeist werden.

from keras.utils import pad_sequences

# pad sequences
encoder_seq = pad_sequences(encoder, maxlen=max_encoder_sequence_len, padding="post")
decoder_inp = pad_sequences([arr[:-1] for arr in decoder], maxlen=max_decoder_sequence_len, padding="post")
decoder_output = pad_sequences([arr[1:] for arr in decoder], maxlen=max_decoder_sequence_len, padding="post")
print(encoder_seq)
print([idx_2_txt_encoder[i] for i in encoder_seq[0]])
print([idx_2_txt_decoder[i] for i in decoder_inp[0]])
print([idx_2_txt_decoder[i] for i in decoder_output[0]])

Zur besseren Veranschaulichung habe ich die 4 print Befehle hinzugefügt. Anfangs dachte ich, dass der längste Satz im Datensatz die Länge für Input Daten und Output Daten vorgibt. Also die Paddinglänge für Input und Output gleich wäre. Das ist aber nicht der Fall! Input Daten und Output Daten sind auf unterschiedliche Längen normiert!

In dem Beispiel hier, habe ich einen winzigen Datensatz benutzt bei dem der längste englische Satz aus 3 Wörtern besteht und der längste französische Satz aus 10 Wörtern. Demnach wird mit „<pad>“ bzw 0 jeder Trainingssatz aufgefüllt bis der Input 3 bzw. der Output 10 Wörter erreicht hat.

Der Decoder Output mit [arr[1:] for arr in decoder] entfernt den „start“ token und der Decoder Input mit [arr[:-1] for arr in decoder] entfernt den „end“ token.

Bei Sequenz-zu-Sequenz-Modellen wird der Decoder darauf trainiert, die Ausgabesequenz auf der Grundlage der Eingabesequenz und der zuvor generierten Token zu erzeugen. Während des Trainings enthält die Eingangssequenz des Decoders den „Start“-Token, der als Initialisierungs-Token für den Decoder dient. Beim Training des Decoders soll dieser jedoch den nächsten Token auf der Grundlage der zuvor generierten Token vorhersagen, mit Ausnahme des „Start“-Tokens. Daher wird bei der Vorbereitung der Decoder-Ausgabesequenz das „Start“-Token aus jeder Sequenz entfernt. Dies geschieht, um die Eingangs- und Ausgangssequenzen des Decoders korrekt aufeinander abzustimmen. Die Decoder-Eingangssequenz enthält den „Start“-Token und schließt den „End“-Token aus, während die Decoder-Ausgangssequenz den „End“-Token enthält und den „Start“-Token ausschließt. Auf diese Weise stellen wir sicher, dass der Decoder lernt, die richtige Ausgabesequenz auf der Grundlage der Eingabe zu erzeugen.

Während der Inferenz (Modellanwendung nach dem Training) bzw. der Übersetzung können wir bei der Verwendung des trainierten Modells zur Erzeugung von Übersetzungen mit dem „Start“-Token beginnen und iterativ Token erzeugen, bis wir auf das „End“-Token stoßen oder eine maximale Sequenzlänge erreichen.

Beim Padding für Tensorflow.js übernehmen wir 1:1 die Vorgehensweise von Python. Leider haben wir auch hier wieder mehr Arbeit und mehr Code Zeilen, da in Tfjs keine padSequences Funktion existiert. Ich habe mir deswegen eine eigene padSequences Funktion geschrieben:

function padSequences(sequences) {
  const paddedSequences = [];
  const maxlen = findMaxLength(sequences);

  for (const sequence of sequences) {
    if (sequence.length >= maxlen) {
      paddedSequences.push(sequence.slice(0, maxlen));
    } else {
      const paddingLength = maxlen - sequence.length;
      const paddingArray = new Array(paddingLength).fill(0);
      const paddedSequence = sequence.concat(paddingArray);
      paddedSequences.push(paddedSequence);
    }
  }

  return paddedSequences;
}

Anschließend können wir mit Hilfe dieser Funktion unseren encoder, decoder Input und decoder Output bestimmen:

function pad(data) {
  const encoderSeq = padSequences(data.en);
  const decoderInp = padSequences(data.de.map((arr) => arr.slice(0, -1))); // Has startToken
  const decoderOutput = padSequences(data.de.map((arr) => arr.slice(1))); // Has endToken
  console.log(decoderInp);
}

Bei mir ist die „1“ der „startToken“ daher sieht der decoder Input beispielsweise so aus:

Modell erstellen

# Design LSTM NN (Encoder & Decoder)
# encoder model
encoder_input = Input(shape=(None,), name="encoder_input_layer")
encoder_embedding = Embedding(num_encoder_tokens, 300, input_length=max_encoder_sequence_len, name="encoder_embedding_layer")(encoder_input)
encoder_lstm = LSTM(256, activation="tanh", return_sequences=True, return_state=True, name="encoder_lstm_1_layer")(encoder_embedding)
encoder_lstm2 = LSTM(256, activation="tanh", return_state=True, name="encoder_lstm_2_layer")(encoder_lstm)
_, state_h, state_c = encoder_lstm2
encoder_states = [state_h, state_c]

# decoder model
decoder_input = Input(shape=(None,), name="decoder_input_layer")
decoder_embedding = Embedding(num_decoder_tokens, 300, input_length=max_decoder_sequence_len, name="decoder_embedding_layer")(decoder_input)
decoder_lstm = LSTM(256, activation="tanh", return_state=True, return_sequences=True, name="decoder_lstm_layer")
decoder_outputs, _, _ = decoder_lstm(decoder_embedding, initial_state=encoder_states)
decoder_dense = Dense(num_decoder_tokens+1, activation="softmax", name="decoder_final_layer")
outputs = decoder_dense(decoder_outputs)

model = Model([encoder_input, decoder_input], outputs)

Das Codebeispiel zeigt den  Entwurf eines neuronalen Netzes mit Long Short-Term Memory (LSTM) für Sequenz-zu-Sequenz-Lernen (Seq2Seq) dar, das typischerweise für Aufgaben wie maschinelle Übersetzung verwendet wird. Der Code definiert zwei Hauptteile:  Encoder-Modell und Decoder-Modell.

Encoder-Modell:

• • Die Encoder-Eingangsschicht (encoder_input) stellt die Eingangssequenz des Encoder-Modells dar.
  • Die Eingangssequenz wird mithilfe einer Einbettungsschicht (encoder_embedding) eingebettet, die jedes Token in eine dichte Vektordarstellung umwandelt.
  • Die eingebettete Sequenz wird dann durch die erste LSTM-Schicht (encoder_lstm_1_layer) geleitet, um sequenzielle Informationen zu erfassen. Die LSTM-Schicht gibt die Ausgabesequenz und den endgültigen versteckten Zustand zurück.
  • Die Ausgabesequenz der ersten LSTM-Schicht wird von der zweiten LSTM-Schicht (encoder_lstm_2_layer) weiterverarbeitet. Die zweite LSTM-Schicht liefert nur den endgültigen versteckten Zustand, der die zusammengefasste Information der Eingabesequenz darstellt.
  • Der final hidden Zustand der zweiten LSTM-Schicht wird in den final hidden Zustand (state_h) und den final Zellzustand (state_c) aufgeteilt, die als Anfangszustände für das Decodermodell verwendet werden.
  • Die Zustände des Encoder-Modells sind als encoder_states definiert und werden an das Decoder-Modell weitergegeben.

Decoder-Modell:

• Die Decoder-Eingangsschicht (decoder_input) stellt die Eingangssequenz des Decoder-Modells dar, die aus der um eine Position verschobenen Zielsequenz besteht.
• Ähnlich wie beim Encoder wird die Eingangssequenz mit Hilfe einer Einbettungsschicht (decoder_embedding) eingebettet.
• Die eingebettete Sequenz wird dann durch eine LSTM-Schicht (decoder_lstm_layer) geleitet, wobei die Anfangszustände auf die Endzustände des Encoder-Modells gesetzt werden. Dies ermöglicht es dem Decoder, die relevanten Informationen des Encoders zu berücksichtigen.
• Die LSTM-Schicht liefert die Ausgabesequenz und die Endzustände.
• Die Ausgabesequenz aus der LSTM-Schicht wird durch eine dichte Schicht (decoder_final_layer) mit einer Softmax-Aktivierungsfunktion geleitet, die die Wahrscheinlichkeitsverteilung über die ausgegebenen Token vorhersagt.

Die Klasse Model wird zur Erstellung des Gesamtmodells verwendet, indem die Eingabeschichten ([encoder_input, decoder_input]) und die Ausgabeschicht (outputs) angegeben werden. Diese Modellarchitektur folgt der Grundstruktur eines Encoder-Decoder-Modells unter Verwendung von LSTMs, bei dem der Encoder die Eingabesequenz verarbeitet und den Kontextvektor (final hidden state) erzeugt, der dann vom Decoder zur Erzeugung der Ausgabesequenz verwendet wird.

Das selbe Modell lässt sich auch in JS umsetzen:

function createModell(
  numEncoderTokens,
  numDecoderTokens,
  maxEncoderSequenceLen,
  maxDecoderSequenceLen
) {
  // Encoder model
  const encoderInput = tf.input({ shape: [null], name: "encoderInputLayer" });
  const encoderEmbedding = tf.layers
    .embedding({
      inputDim: numEncoderTokens,
      outputDim: 300,
      inputLength: maxEncoderSequenceLen,
      name: "encoderEmbeddingLayer",
    })
    .apply(encoderInput);
  const encoderLstm = tf.layers
    .lstm({
      units: 256,
      activation: "tanh",
      returnSequences: true,
      returnState: true,
      name: "encoderLstm1Layer",
    })
    .apply(encoderEmbedding);
  const [_, state_h, state_c] = tf.layers
    .lstm({
      units: 256,
      activation: "tanh",
      returnState: true,
      name: "encoderLstm2Layer",
    })
    .apply(encoderLstm);
  const encoderStates = [state_h, state_c];

  // Decoder model
  const decoderInput = tf.input({ shape: [null], name: "decoderInputLayer" });
  const decoderEmbedding = tf.layers
    .embedding({
      inputDim: numDecoderTokens,
      outputDim: 300,
      inputLength: maxDecoderSequenceLen,
      name: "decoderEmbeddingLayer",
    })
    .apply(decoderInput);
  const decoderLstm = tf.layers.lstm({
    units: 256,
    activation: "tanh",
    returnState: true,
    returnSequences: true,
    name: "decoderLstmLayer",
  });
  const [decoderOutputs, ,] = decoderLstm.apply(decoderEmbedding, {
    initialState: encoderStates,
  });
  const decoderDense = tf.layers.dense({
    units: numDecoderTokens + 1,
    activation: "softmax",
    name: "decoderFinalLayer",
  });
  const outputs = decoderDense.apply(decoderOutputs);

  const model = tf.model({ inputs: [encoderInput, decoderInput], outputs });
  return model;
}

Modell trainieren und speichern

# train model
loss = tf.losses.SparseCategoricalCrossentropy()
model.compile(optimizer='rmsprop', loss=loss, metrics=['accuracy'])
callback = tf.keras.callbacks.EarlyStopping(monitor='loss', patience=3)
history = model.fit(
   [encoder_seq, decoder_inp],
   decoder_output,
   epochs=80,  # 80
   batch_size=450,  # 450
   # callbacks=[callback]
)

Die Funktion model.fit() wird zum Trainieren des Modells verwendet. Die Trainingsdaten bestehen aus den Encoder-Eingangssequenzen (encoder_seq), den Decoder-Eingangssequenzen (decoder_inp) und den Decoder-Ausgangssequenzen (decoder_output). Das Training wird für eine bestimmte Anzahl von Epochen (epochs) und eine Batchgröße von 450 durchgeführt. Der Trainingsfortschritt kann mit dem EarlyStopping-Callback überwacht werden, der das Training abbricht, wenn sich der Verlust nach einer bestimmten Anzahl von Epochen nicht verbessert hat. Der Trainingsverlauf wird in der Variable history gespeichert.

Das Modell in Tensorflow kann sowohl Tensoren als auch Numpy-Arrays als Eingaben verarbeiten. Wenn man Numpy-Arrays als Eingaben an die Funktion fit in TensorFlow übergibt, konvertiert diese sie intern automatisch in Tensoren, bevor das Training durchgeführt wird. Im Code werden die encoder_seq, decoder_inp und decoder_output Arrays automatisch in Tensoren umgewandelt, wenn man sie an die fit Funktion übergibt. Dies erlaubt es TensorFlow, die notwendigen Berechnungen während des Trainingsprozesses durchzuführen.

In ähnlicher Weise kann die Funktion fit in TensorFlow.js sowohl mit Tensoren als auch mit Arrays umgehen. Man kann also direkt sein 2D-Array (encoderSeq) als erste Eingabe übergeben und TensorFlow.js wird sie intern in Tensoren für das Training umwandeln. Obwohl man Arrays anstelle von Tensoren übergibt, sind TensorFlow und TensorFlow.js in der Lage, die Konvertierung intern zu handhaben und das Training entsprechend durchzuführen.

# save model
model.save("./model-experimental/Translate_Eng_FR.h5")
model.save_weights("./model-experimental/model_NMT")

Es ist üblich, die Gewichte eines trainierten Modells getrennt von der Modellarchitektur zu speichern. Die separate Speicherung der Gewichte und der Architektur ermöglicht mehr Flexibilität beim Laden und Verwenden des Modells. So kann man beispielsweise nur die Gewichte laden, wenn die Modellarchitektur an anderer Stelle definiert wurde oder wenn die Gewichte in einem anderen Modell mit einer ähnlichen Architektur verwenden werden sollen.

Abschließend auch der Code in JavaScript:

async function trainModel(data) {
  const encoderSeq = padSequences(data.en);
  const decoderInp = padSequences(data.de.map((arr) => arr.slice(0, -1))); // Has startToken
  const decoderOutput = padSequences(data.de.map((arr) => arr.slice(1))); // Has endToken

  data.model.compile({
    optimizer: "rmsprop",
    loss: "sparseCategoricalCrossentropy",
    metrics: ["accuracy"],
  });
  const history = await data.model.fit(
    [encoderSeq, decoderInp],
    decoderOutput,
    {
      epochs: 80,
      batch_size: 450,
    }
  );
}

An dieser Stelle kommt meine Frustration mit Tensorflow.js ins Spiel. Obwohl jeder Schritt 1:1 dem Schritt in Python entspricht klappt das Training des Modells in Tensorflow.js nicht… Ich erhalte immer eine Fehlermeldung:

C:\Users\[...]\node_modules\@tensorflow\tfjs-layers\dist\tf-layers.node.js:23386
            if (array.shape.length !== shapes[i].length) {
                            ^

TypeError: Cannot read properties of undefined (reading 'length')
    at standardizeInputData

Allgemein Verlustfunktion und Optimierer

Verlustfunktionen und Optimierer sind Schlüsselkomponenten beim Training eines maschinellen Lernmodells. Eine Verlustfunktion, die auch als Ziel- oder Kostenfunktion bezeichnet wird, misst die Leistung eines Modells, indem sie die Unähnlichkeit zwischen den vorhergesagten Ausgaben und den tatsächlichen Zielen quantifiziert. Das Ziel des Trainings eines Modells ist es, diese Verlustfunktion zu minimieren, was im Wesentlichen bedeutet, dass die Fähigkeit des Modells, genaue Vorhersagen zu treffen, verbessert wird. Die Wahl der Verlustfunktion hängt von der jeweiligen Problemstellung ab. Bei Klassifizierungsaufgaben sind beispielsweise die kategoriale Kreuzentropie, die binäre Kreuzentropie und die Softmax-Kreuzentropie gängige Verlustfunktionen, während bei Regressionsaufgaben häufig der mittlere quadratische Fehler (MSE) und der mittlere absolute Fehler (MAE) verwendet werden.

Ein Optimierer hingegen ist für die Aktualisierung der Modellparameter (Gewichte und Verzerrungen) während des Trainings verantwortlich, um die Verlustfunktion zu minimieren. Er bestimmt, wie die Parameter des Modells auf der Grundlage der berechneten Gradienten der Verlustfunktion in Bezug auf diese Parameter angepasst werden. Optimierer verwenden verschiedene Algorithmen und Techniken, um effizient nach den optimalen Werten der Parameter zu suchen. Zu den gängigen Optimierern gehören Stochastic Gradient Descent (SGD), Adam, RMSprop und Adagrad. Jeder Optimierer hat seine eigenen Merkmale und Hyperparameter, die den Trainingsprozess und die Konvergenzgeschwindigkeit des Modells beeinflussen können.

Die Wahl der Verlustfunktion und des Optimierers hängt von der spezifischen Aufgabe, der Modellarchitektur und den Eigenschaften des Datensatzes ab. Es ist wichtig, geeignete Verlustfunktionen und Optimierer auszuwählen, um ein effektives Modelltraining und eine Konvergenz zur optimalen Leistung zu gewährleisten.

Häufig verwendete Verlustfunktionen und Optimierer

Verlustfunktionen:

• Kategoriale Kreuz-Entropie: Diese Verlustfunktion wird häufig in Sequenz-zu-Sequenz-Modellen für Mehrklassen-Klassifizierungsprobleme verwendet, bei denen jedes Zielwort als eine eigene Klasse behandelt wird.
•  Spärliche kategoriale Kreuzentropie: Ähnlich wie die kategoriale Kreuzentropie, aber geeignet, wenn die Zielsequenzen als spärliche ganzzahlige Sequenzen dargestellt werden (z. B. unter Verwendung von Wortindizes).

Optimierer:

• Adam: Adam ist ein beliebter Optimierer, der die Vorteile des Adaptiven Gradientenalgorithmus (AdaGrad) und der Root Mean Square Propagation (RMSprop) kombiniert. Er passt die Lernrate für jeden Parameter auf der Grundlage früherer Gradienten an, was zu einer schnelleren Konvergenz und einer besseren Handhabung spärlicher Gradienten beiträgt.
• RMSprop: RMSprop ist ein Optimierer, der einen gleitenden Durchschnitt der quadrierten Gradienten für jeden Parameter beibehält. Er passt die Lernrate auf der Grundlage der Größe des Gradienten an, was eine schnellere Konvergenz und eine bessere Leistung bei nicht stationären Zielen ermöglicht.
• Adagrad: Adagrad passt die Lernrate individuell für jeden Parameter an, basierend auf der historischen Gradientenakkumulation. Es führt größere Updates für seltene Parameter und kleinere Updates für häufige Parameter durch.

Dateien zum Herunterladen

• NLP Tensorflow.js code (model has an error!)

The post NLP Anwendung: Tensorflow.js vs Tensorflow Python – Teil 2 appeared first on Nerd Corner.

Ich habe viele Abende damit verbracht mein Projekt mit Tensorflow.js zum Laufen zu bringen und bin am Ende gescheitert. Der Wechsel auf Python brachte dann den erhofften Durchbruch! Ich würde jedem empfehlen für NLP Anwendungen Python zu nutzen! Nichtsdestotrotz möchte ich in diesem Beitrag einmal die Unterschiede zwischen Tensorflow.js und Tensorflow im Bezug auf mein Projekt anhand von Codebeispielen verdeutlichen. Zwischendurch werde ich auch so gut wie möglich mein neu angesammeltes Wissen in die jeweiligen Abschnitte einbauen.

Das könnte dich auch interessieren: NLP Anwendung Teil 2 (OOV Token, Padding, Modell erstellen und Modell trainieren)

Daten einlesen

Zunächst einmal braucht man einen Datensatz mit dem später das Modell trainiert werden soll. Hier kann ich https://www.kaggle.com/ empfehlen. Man findet dort eine Vielzahl an Datensätzen zur freien Verfügung und teilweise sogar weiterführende Codebeispiele. Den Datensatz kann man entweder per Link einlesen oder downloaden und dann lokal vom File System einlesen. Ein guter Datensatz sollte über 100.000 Beispiele enthalten. Am besten auch teilweise ganze Paragraphen. So sieht beispielsweise ein Englisch/Französischer Datensatz als CSV aus:

Zunächst die simple Variante mittels Python:

import pandas as pd

# read in dataSet for training
df = pd.read_csv("./dataset/eng_-french.csv")
df.columns = ["english", "french"]
print(df.head())
print(df.info())

Wir nutzen die pandas Library und lesen damit die CSV ein. Mit dem head() können wir testen ob es funktioniert hat und uns die ersten 5 Zeilen anzeigen lassen. Mittels info() erhalten wir weitere Infos wie beispielsweise Anzahl der Spalten und Anzahl der Reihen:

Zum Vergleich in Tensorflow.js (Tfjs) gibt es auch eine Möglichkeit CSV einzulesen:

const tf = require("@tensorflow/tfjs");

async function readInData() {
  await tf.ready();
  const languageDataSet = tf.data.csv("file://" + "./ger_en_trans.csv");

  // Extract language pairs
  const dataset = languageDataSet.map((record) => ({
    en: record.en,
    de: record.de,
  }));

  const pairs = await dataset.toArray();

  console.log(pairs);
}

readInData();

Ich habe dabei zunächst versucht den gleichen Datensatz wie in der Python Version einzulesen:

Anschließend wollte ich die Überschriften kürzen in der originalen CSV, dadurch bekam ich aber seltsamer Weise eine Fehlermeldung beim Einlesen. Selbst als ich den Originalzustand der CSV wiederhergestellt hatte, blieb der Fehler:

Letztlich habe ich mich dann dafür entschieden einen anderen Datensatz zu nutzen:

Der war beim Einlesen auch wesentlich besser lesbar:

Und hier das Endergebnis nach dem Mapping:

Obwohl Tfjs extra eine Funktion zum Einlesen der CSV bietet, hatte ich trotzdem schon mehr Ärger als in der Python Version. Ich habe auch auf die Schnelle keine Möglichkeit gefunden einen Datensatz im txt-Format einzulesen. Allerdings sind txt-Datensätze weit verbreitet!

Daten vorbereiten

Ich habe oft gesehen, dass für die Datenvorbereitung eine cleaning Funktion geschrieben wurde und der Output Satz auch einen Start und End Token erhalten hat. Daraufhin habe ich mich gefragt ob auch der Input Satz also der Encoder einen Start und End Token braucht. Im Rahmen von Sequenz-zu-Sequenz-Modellen benötigt der Encoder aber keine expliziten Start- und End-Token. Sein Zweck ist es, die Eingabesequenz so zu verarbeiten, wie sie ist, und eine Darstellung der Eingabe zu erstellen.

Der Decoder hingegen, der die Ausgabesequenz erzeugt, profitiert in der Regel von der Verwendung von Start- und End-Tokens. Diese Token helfen, den Anfang und das Ende der erzeugten Sequenz zu kennzeichnen. Die Verwendung von Start- und End-Token ist daher spezifisch für den Decoder. Während des Trainings enthält die Eingangssequenz des Decoders ein Start-Token am Anfang und schließt ein End-Token am Ende aus. Die Ausgabesequenz des Decoders enthält den End-Token und schließt den Start-Token aus. Auf diese Weise lernt das Modell, die richtige Ausgabesequenz auf der Grundlage der Eingabe zu erzeugen.

Bei der Erstellung von Übersetzungen mit dem trainierten Modell beginnt man mit dem Start-Token und generiert ein Token nach dem anderen, bis man auf den End-Token trifft oder eine maximale Sequenzlänge erreicht. Das Hinzufügen von Start- und End-Token zum Decoder-Satz verbessert die Leistung des NLP-Übersetzermodells. Es hilft bei der Festlegung klarer Sequenzgrenzen und unterstützt den Generierungsprozess, indem es angibt, wo die Übersetzung beginnt und endet.

Zusammengefasst:

• Encoder: Keine Notwendigkeit für Start- und End-Token. Verarbeitet die Eingabesequenz wie sie ist.
• Decoder: Start- und End-Token sind hilfreich für die Generierung der Ausgabesequenz.

Wir beginnen wieder mit dem einfachen Teil, nämlich Python. Wie wollen die eingelesenen Daten säubern. Das bedeutet alles in Kleinbuchstaben umwandeln und Zeichen, die nicht zum Alphabet gehören oder Satzzeichen sind, entfernen. Dafür brauchen wir die Regex Bibliothek (re).

import re

def clean(text):
    text = text.lower()  # lower case
    # remove any characters not a-z and ?!,'
    # please note that french has additional characters...I just simplified that
    text = re.sub(u"[^a-z!?',]", " ", text)
    return text


# apply cleaningFunctions to dataframe
data["english"] = data["english"].apply(lambda txt: clean(txt))
data["french"] = data["french"].apply(lambda txt: clean(txt))

# add <start> <end> token to decoder sentence (french)
data["french"] = data["french"].apply(lambda txt: f"<start> {txt} <end>")

print(data.sample(10))

Ich habe hier vereinfacht. Da es sich um einen französischen Datensatz handelt sollte man eigentlich eine extra cleaning Funktion schreiben, die auch französische Buchstaben wie „ê“ berücksichtigt. Die  sample() Funktion dient nur zum veranschaulichen der Daten:

In Tfjs ist der Ablauf absolut identisch. Ich habe eine cleanData() Funktion erstellt und den vorherigen Code modifiziert:

function cleanData(text) {
  //if necessary also remove any characters not a-z and ?!,'
  return text.toLowerCase();
}

const dataset = languageDataSet.map((record) => ({
   en: cleanData(record.en),
   de: "startToken " + cleanData(record.de) + " endToken",
 }));

Das Ergebnis ist daher auch identisch zum Python Ansatz:

Wenn die Wörter „start“ und „end“ Teil regulärer Sätze sind und nicht als spezielle Token zur Markierung von Anfang und Ende von Sequenzen verwendet werden, dann sollten sie bei der Tokenisierung auf keinen Fall durch entsprechende Indizes ersetzt werden. Bei der Tokenisierung ist es wichtig, spezielle Token zu wählen, die in den eigentlichen Eingabedaten wahrscheinlich nicht vorkommen werden. Dadurch wird sichergestellt, dass das Modell sie von normalen Wörtern unterscheiden kann und lernt, die entsprechenden Ausgabesequenzen zu erzeugen.

Wenn die Wörter “ start“ und „end“ reguläre Wörter in den Eingabesätzen sind, sollte man in Erwägung ziehen, verschiedene spezielle Token zu verwenden, um den Anfang und das Ende von Sequenzen zu markieren. Eine gängige Wahl sind “ <start>“ und „<end>“. Durch die Verwendung spezieller Token, die wahrscheinlich nicht zum regulären Vokabular gehören, kann sichergestellt werden, dass sie vom Modell während des Trainings und der Generierung richtig identifiziert und verarbeitet werden können.

Beispielsweise würden die tokenisierten Sequenzen wie folgt aussehen:

Decoder Eingabe: [„<start>“, „hallo“, „welt“]
Decoder Ausgabe: [„hallo“, „welt“, „<end>“]

Daher nachfolgendes VERMEIDEN:

Decoder Eingabe: [„start“, „hallo“, „welt“]
Decoder Ausgabe: [„hallo“, „welt“, „end“]

Tokenisierung

# tokenization
import tensorflow as tf
from tensorflow import keras
from keras.preprocessing.text import Tokenizer
import numpy as np

# english tokenizer
english_tokenize = Tokenizer(filters='#$%&()*+,-./:;<=>@[\\]^_`{|}~\t\n')
english_tokenize.fit_on_texts(data["english"])
num_encoder_tokens = len(english_tokenize.word_index)+1
# print(num_encoder_tokens)
encoder = english_tokenize.texts_to_sequences(data["english"])
# print(encoder[:5])
max_encoder_sequence_len = np.max([len(enc) for enc in encoder])
# print(max_encoder_sequence_len)

# french tokenizer
french_tokenize = Tokenizer(filters="#$%&()*+,-./:;<=>@[\\]^_`{|}~\t\n")
french_tokenize.fit_on_texts(data["french"])
num_decoder_tokens = len(french_tokenize.word_index)+1
# print(num_decoder_tokens)
decoder = french_tokenize.texts_to_sequences(data["french"])
# print(decoder[:5])
max_decoder_sequence_len = np.max([len(dec) for dec in decoder])
# print(max_decoder_sequence_len)

Dieser Code führt Tokenisierung und Sequenzvorverarbeitung mit der Tokenizer Klasse in TensorFlow durch.

1. english_tokenize = Tokenizer(filters=’#$%&()*+,-./:;<=>@[\\]^_`{|}~\t\n‘) Initialisiert ein Tokenizer-Objekt für englische Sätze. Der Parameter `filters` gibt Zeichen an, die während der Tokenisierung herausgefiltert werden sollen. Wir haben die Daten im Cleaning Prozess bereits gefiltert, es ist daher eigentlich nicht notwendig hier nochmal zu filtern.
2. english_tokenize.fit_on_texts(data[„english“]) Aktualisiert das interne Vokabular des Tokenizers basierend auf den englischen Sätzen in der Variable data. Jedem Wort im Vokabular wird ein eindeutiger Index zugewiesen.
3. num_encoder_tokens = len(english_tokenize.word_index) + 1 Bestimmt die Anzahl der eindeutigen Token (Wörter) im englischen Vokabular. Das Attribut word_index des Tokenizers gibt ein Wörterbuch zurück, das Wörter auf ihre jeweiligen Indizes abbildet.
4. encoder = english_tokenize.texts_to_sequences(data[„english“]) Konvertiert die englischen Sätze in der Variablen data in Sequenzen von Token-Indizes unter Verwendung des Tokenizers. Jeder Satz wird durch eine Folge von Ganzzahlen ersetzt, die die entsprechenden Wörter darstellen.
5. max_encoder_sequence_len = np.max([len(enc) for enc in encoder]) Berechnet die maximale Länge (Anzahl der Token) unter allen kodierten Sequenzen. Sie verwendet die Funktion max von NumPy, um den maximalen Wert in einem Listenverständnis zu finden.

Diese Schritte helfen, die Sätze für die weitere Verarbeitung in einem NLP-Modell vorzubereiten. Das ist für beide Sprachen notwendig!

Die Sätze wurden jetzt in Token umgewandelt, anschließend in Sequenzen von Token-Indizes konvertiert und die maximale Sequenzlänge bestimmt. Ein Beispielsatz aus dem Datensatz sieht jetzt so aus: [[148], [252], [59], [14], [111]]. Hierbei könnte die 148 für „I“, 252 für „am“, 59 für „very“, 14 für „hungry“ und 111 für „now“ stehen.

idx_2_txt_decoder = {k: i for i, k in french_tokenize.word_index.items()}
# print(idx_2_txt_decoder)
idx_2_txt_encoder = {k: i for i, k in english_tokenize.word_index.items()}
# print(idx_2_txt_encoder)

idx_2_txt_decoder[0] = "<pad>"
idx_2_txt_encoder[0] = "<pad>"

Der Codeschnipsel idx_2_txt_encoder = {k: i for i, k in english_tokenize.word_index.items()} erstellt ein Wörterbuch Verzeichnis idx_2_txt_encoder, das Token-Indizes den entsprechenden Wörtern im englischen Vokabular zuordnet: {k: i for i, k in english_tokenize.word_index.items()} ist ein Verzeichnis, das über die Schlüssel-Wert-Paare in english_tokenize.word_index iteriert. Bei jeder Iteration steht der Key (k) für ein Wort im Vokabular, und der Wert (i) für den entsprechenden Index. Das Verständnis erstellt ein neues Wörterbuch, dessen Keys die Indizes (i) und die Werte die Wörter (k) sind.

Das resultierende idx_2_txt_encoder – Wörterbuch ermöglicht es, das Wort, das einem bestimmten Index entspricht, im englischen Wortschatz nachzuschlagen. english_tokenize.word_index würde übrigens die Anzeigen genau vertauschen. Hier wäre der Key das Wort sein und der Wert der Index. Die zweite Zeile, idx_2_txt_encoder[0] = „<pad>“, fügt dem Wörterbuch einen speziellen Eintrag hinzu. Hier wird das Wort „<pad>“ dem Index „0“ zugeordnet, um einen Auffüllungs-Token anzugeben, der beim Padding von Sequenzen verwendet wird.

Anschließend sollte man das Wörterbuch Verzeichnis abspeichern, denn später wenn das Modell trainiert wurde und eingesetzt wird, werden die Übersetzungen des Modells ebenfalls eine Reihe von Indizes sein, die mit Hilfe des Wörterbuchs in lesbare Sätze zurücktransformiert werden.

# Saving the dicitionaries
pickle.dump(idx_2_txt_encoder, open("./saves/idx_2_word_input.txt", "wb"))
pickle.dump(idx_2_txt_decoder, open("./saves/idx_2_word_target.txt", "wb"))

Der gleiche Ablauf wie in Python lässt sich auch für die NLP Anwendung in Tensorflow.js konstruieren. Selbstverständlich benötigt man etwas mehr Codezeilen und der Arbeitsaufwand ist insgesamt höher. Die erste Hürde hierbei ist der Tokenizer. Leider besitzt Tfjs im Gegensatz zu Tensorflow (Python) keinen eigenen Tokenizer. Nach ausgiebiger Recherche fand ich zum Glück den natural.WordTokenizer. Hierbei möchte ich darauf hinweisen, dass definitv ein Node.js Projekt benötigt wird. Tfjs lässt sich zwar über einen <script> Tag einbinden, der natural.WordTokenizer, dagegen aber nicht!

Ein weiterer wichtiger Punkt ist, dass der WordTokenizer „<“ und „>“ entfernt. Aus einem Output Satz „<start> ich esse <end>“ wird daher einfach [’start‘, ‚ich‘, ‚esse‘, ‚end‘]. Somit ist der „<start>“ und „<end>“ Token nicht mehr klar erkennbar! Ich habe sie daher im JS Code von Anfang ersetzt durch „startToken“ und „endToken“.

Zunächst tokenisieren wir wieder jeden einzelnen Satz aus dem Datensatz und erstellen anschließend ein Vokabelverzeichnis für jede der beiden Sprachen. Abschließend ersetzen wir alle Wörter durch die Indizes aus dem Vokabelverzeichnis:

const natural = require("natural");

function tokenize(data) {
  const tokenizer = new natural.WordTokenizer();

  enData = data.map((row) => tokenizer.tokenize(row.en));
  deData = data.map((row) => tokenizer.tokenize(row.de));

  const enVocabulary = new Map();
  const deVocabulary = new Map();

  // Insert <pad> at index 0
  enVocabulary.set("<pad>", 0);
  deVocabulary.set("<pad>", 0);

  const fillVocabulary = (langData, vocabMap) => {
    langData.forEach((sentence) => {
      sentence.forEach((word) => {
        if (!vocabMap.has(word)) {
          const newIndex = vocabMap.size;
          vocabMap.set(word, newIndex);
        }
      });
    });
  };

  fillVocabulary(enData, enVocabulary);
  fillVocabulary(deData, deVocabulary);

  // Replace words with indexes
  const indexedEnData = enData.map((element) =>
    element.map((word) => enVocabulary.get(word))
  );
  const indexedDeData = deData.map((element) =>
    element.map((word) => deVocabulary.get(word))
  );

  return { en: indexedEnData, de: indexedDeData };
}

Um später die Resultate unseres Modells wieder in Wörter umwandeln zu können und um auch später im realen Anwendungsfall das Modell nutzen zu können, speichern wir die beiden Vokabelverzeichnisse ab. Ich habe dabei die Key und Value Paare getauscht, aber letztlich ist das nicht zwingend erforderlich:

const fs = require("fs");

// store the input and output key value pairs
  fs.writeFileSync(
    "vocabulary/inputVocableSet.json",
    JSON.stringify(switchKeysAndValues(Object.fromEntries(enVocabulary)))
  );
  fs.writeFileSync(
    "vocabulary/outputVocableSet.json",
    JSON.stringify(switchKeysAndValues(Object.fromEntries(deVocabulary)))
  );

function switchKeysAndValues(obj) {
  const switchedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      switchedObj[value] = key;
    }
  }
  return switchedObj;
}

Als Resultat erhalten wir ein JSON Objekt mit unseren Vokabeln:

Anschließend returnen wir das Ergebnis unserer Funktion:

Dateien zum Herunterladen

• NLP Tensorflow.js code (model has an error!)

The post NLP Anwendung: Tensorflow.js vs Tensorflow Python – Teil 1 appeared first on Nerd Corner.

Das könnte dich auch interessieren: Wie man in Windows die GPU für TensorFlow aktiviert

Sprache und Umgebung

Tensorflow.js wurde speziell für JavaScript entwickelt, was bedeutet, dass sich Modelle direkt in JavaScript-Code implementieren lassen. Dies ermöglicht die nahtlose Integration in Webanwendungen und die Ausführung der Modelle im Browser ohne zusätzliche Serverinfrastruktur.

Tensorflow Python bietet eine umfassende Python-Bibliothek für maschinelles Lernen. Python ist eine weit verbreitete Programmiersprache im Bereich des maschinellen Lernens und bietet eine Vielzahl von Bibliotheken und Frameworks, die die Entwicklung und den Einsatz von Modellen erleichtern.

Zielplattform

Eine der größten Stärken von Tensorflow.js ist die Möglichkeit, Modelle direkt im Browser auszuführen. Dies ermöglicht es Entwicklern, interaktive Webanwendungen mit maschinellem Lernen zu erstellen, ohne dass der Nutzer zusätzliche Software installieren oder externe Serveranfragen senden muss.

Tensorflow Python hingegen ermöglicht die Entwicklung und Ausführung von Modellen auf verschiedenen Plattformen, einschließlich Desktop-Computern, Servern und mobilen Geräten. Es bietet eine breite Palette an Funktionen und unterstützt fortschrittliche Techniken wie das Trainieren von Modellen auf GPUs oder TPUs. TPU steht für „Tensor Processing Unit“. Das sind anwendungsspezifische Chips um Anwendungen im Rahmen von maschinellem Lernen zu beschleunigen

Community

Wenn man ehrlich ist die Tensorflow.js Community einfach zu klein. Bei vielen Fragen hat man das Gefühl man leistet hier „Pioniersarbeit“, was gerade für Anfänger nicht zu empfehlen ist. Zur Verdeutlichung: Es gibt 80 Mal mehr StackOverflow Fragen zu TensorFlow als zu TensorFlow.js. Je nach Anwendungsfall existieren aber mittlerweile auch für TensorFlow.js eine Reihe von Ressourcen, Tutorials und Beispielen, die bei der Entwicklung mit Tensorflow.js helfen können. Da JavaScript eine weit verbreitete Sprache ist, kann man auch auf eine große Menge an generellen Webentwicklungsressourcen zurückgreifen, die bei der Arbeit mit Tensorflow.js helfen können.

Tensorflow Python dagegen profitiert von einer großen und aktiven Community, die regelmäßig neue Modelle, Techniken und Ressourcen entwickelt und veröffentlicht. Es gibt eine Vielzahl von Tutorials, Foren und Open-Source-Projekten, die Ihnen helfen können, Ihre maschinellen Lernprojekte voranzutreiben. Die Python-Community ist für ihre Unterstützung und Zusammenarbeit bekannt, was den Einstieg in Tensorflow Python erleichtern kann.

Bibliotheken

In vielen Fällen und speziell bei meinem NLP Projekt ein K.O Kriterium für Tensorflow.js waren die Bibliotheken. Tensorflow.js hat im Vergleich zu Tensorflow Python viel weniger Bibliotheken. Das liegt aus meiner Sicht an folgenden 3 Punkten:

1. Entwicklungsstand: Tensorflow Python existiert seit mehreren Jahren und hat eine lange Entwicklungszeit hinter sich. Während dieser Zeit wurden zahlreiche Erweiterungen, Module und zusätzliche Bibliotheken entwickelt, die speziell für Tensorflow Python entwickelt wurden. Tensorflow.js hingegen ist eine vergleichsweise neuere Technologie und befindet sich möglicherweise noch in einem früheren Entwicklungsstadium. Daher hat Tensorflow.js möglicherweise weniger Bibliotheken und Erweiterungen, die speziell für diese Plattform entwickelt wurden.

2. Zielplattform: Tensorflow Python richtet sich an eine breite Palette von Plattformen, einschließlich Desktop-Computern, Servern und mobilen Geräten. Daher gibt es eine Vielzahl von spezialisierten Bibliotheken und Erweiterungen für verschiedene Anwendungsfälle und Hardwarekonfigurationen. Tensorflow.js hingegen zielt darauf ab, Modelle direkt im Browser auszuführen. Daher sind die Funktionen und Bibliotheken von Tensorflow.js auf die Anforderungen von Webanwendungen und die begrenzte Ressourcenverfügbarkeit im Browser optimiert.

3. Kompatibilität: Tensorflow.js basiert auf JavaScript, einer Sprache, die in erster Linie für Webentwicklung verwendet wird. Obwohl JavaScript eine große Entwicklergemeinschaft und viele bestehende Bibliotheken und Frameworks hat, sind nicht alle davon direkt mit Tensorflow.js kompatibel. Daher kann es sein, dass nicht alle verfügbaren Bibliotheken und Erweiterungen für Tensorflow Python auch für Tensorflow.js zur Verfügung stehen.

Es ist jedoch wichtig anzumerken, dass Tensorflow.js stetig weiterentwickelt wird und die Bibliothek und die verfügbaren Erweiterungen mit der Zeit wachsen können. Die Community rund um Tensorflow.js arbeitet daran, das Ökosystem zu erweitern und neue Bibliotheken sowie Tools bereitzustellen, um den Funktionsumfang zu verbessern und die Möglichkeiten von Tensorflow.js zu erweitern.

Plattformunterstützung

TensorFlow, das in C++ geschrieben wurde, ist eine plattformübergreifende Bibliothek, die auf verschiedenen Betriebssystemen wie Windows, macOS und Linux unterstützt wird. Es kann sowohl für die Entwicklung und Ausführung von Modellen auf Servern als auch auf Desktop-Computern verwendet werden.

TensorFlow unterstützt daher eine breitere Palette von Plattformen als TensorFlow.js, da TensorFlow.js hauptsächlich auf JavaScript-Umgebungen wie dem Browser und Node.js ausgerichtet ist.

Trainieren großer Modelle

TensorFlow kann sehr große Modelle trainieren und verarbeiten, während TensorFlow.js aufgrund der Leistungseinschränkungen von JavaScript-Engines auf kleinere Modelle beschränkt ist.

JavaScript-Engines sind im Vergleich zu spezialisierten Machine-Learning-Frameworks und Hardwarebeschleunigern wie GPUs oder TPUs weniger leistungsstark. Dies bedeutet, dass TensorFlow.js aufgrund der begrenzten Rechenleistung und des begrenzten Speichers von JavaScript-Engines in der Regel für kleinere Modelle geeignet ist.

Daher wird TensorFlow für Projekte empfohlen, bei denen große Modelle trainiert oder komplexe Berechnungen durchgeführt werden müssen, während TensorFlow.js besser für Anwendungen geeignet ist, die kleinere Modelle verwenden und in Webbrowsern oder JavaScript-Umgebungen ausgeführt werden sollen.

Warum TensorFlow.js clientseitig im Browser nutzen?

Da wäre das Thema Geschwindigkeit. Da man keine Daten an einen entfernten Server senden muss, erfolgt die Klassifizierung schneller. Zudem hat man direkten Zugriff auf die Sensoren wie Kamera, Mikrofon, GPS usw.

Außerdem ist in vielen Ländern der Datenschutz ein wichtiger Punkt. Man kann Daten auf dem eigenen Rechner trainieren und klassifizieren, ohne sie an einen externen Webserver senden zu müssen. Das kann erforderlich sein, um Datenschutzgesetze wie die DSGVO einzuhalten oder wenn man die Daten nicht an Dritte weitergeben möchte.

Mit einem Klick kann jeder auf der Welt über einen Link auf die Anwendung zugreifen und sie nutzen ohne, dass ein komplexes Setup mit Servern und spezieller Hardware wie Grafikkarten erforderlich ist.

Abschließend sollte man bei ML auch die Kosten im Blick behalten. Man muss lediglich für das hosten des Clients zahlen. Das ist deutlich günstiger als die dauerhafte Aufrechterhaltung eines eigenen Servers.

Fazit Tensorflow.js oder Tensorflow nutzen?

Insgesamt kann man die Frage Tensorflow.js oder Tensorflow vereinfacht dadurch beantworten, dass Tensorflow mit Python aufgrund seiner breiten Akzeptanz und großen Community nahezu IMMER die bessere Wahl ist. Nichtsdestotrotz gewinnt Tensorflow.js zunehmend an Bedeutung und wird überwiegend von Entwicklern genutzt, die Webanwendungen mit maschinellem Lernen clientseitig entwickeln möchten.

Das heißt, wenn du Anwendungen erstellen möchtest, die im Webbrowser laufen sollen, ist TensorFlow.js eigentlich die bessere Wahl. Wenn du jedoch Anwendungen erstellen möchtest, die auf einem Server oder einem Desktop-Computer laufen sollen, ist TensorFlow die bessere Option. Außerdem ist die Python Version viel besser geeignet, wenn du mit leistungsstarken Geräten wie GPUs arbeiten möchtest.

The post Tensorflow.js oder Tensorflow nutzen? appeared first on Nerd Corner.

Mein naiver Gedanke war, dass Tensorflow automatisch die GPU benutzen würde. Man muss allerdings erst die nachfolgende Schritt für Schritt Anleitung befolgen, damit Tensorflow die GPU überhaupt erkennt und nutzt.

Das könnte dich auch interessieren: Tensorflow.js oder Tensorflow (Python) nutzen?

DISCLAIMER: Ab Version 2.11 unterstütz Tensorflow keine GPUs mehr unter Windows! Entweder wechselt man das Betriebssystem oder downgraded Tensorflow auf Version 2.10. Außerdem wird eine Grafikkarte von NVIDIA benötigt!

1. Überprüfen der gewünschten CUDA und cuDNN Versionen

Zunächst sollte man herausfinden welche CUDA und cuDNN Version von TensorFlow benötigt wird. Auf der Webseite werden alle Versionen von Tensorflow und die gewünschte CUDA Versionen bzw. cuDNN Versionen aufgelistet: https://www.tensorflow.org/install/source_windows#gpu

2. Überprüfen der eigenen Grafikkarte

Wie bereits im Disclaimer erwähnt muss die Grafikkarte von NVIDIA sein. Auf der Webseite https://developer.nvidia.com/cuda-gpus kann man seine eigene GPU suchen und die „Compute Capability“ überprüfen. Mindestvoraussetzung für Tensorflow ist ein Wert von 3.5, der aber von allen aktuellen Grafikkarten erfüllt wird.

3. Installieren der neusten NVIDIA-Treiber

Um die GPU für TensorFlow zu aktivieren, müssen die neuesten NVIDIA-Treiber installiert sein. Einfach auf die NVIDIA-Website gehen den neuesten Treiber die eigene Grafikkarte herunterladen.

4. Installieren von Visual Studio (optional)

In TensorFlow wurden einige Teile der Bibliothek in C++ geschrieben, um die Leistung zu maximieren. Daher kann die Installation von Visual Studio dazu beitragen, die Kompatibilität und Leistung von TensorFlow zu verbessern: https://visualstudio.microsoft.com/de/vs/

Es reicht hier einzelne Komponenten auszuwählen. Ich habe hier alles mit C++ in „Compiler, Buildtools und Runtimes“ ausgewählt und zusätzlich noch MS Build, was wiederum ein paar weitere Komponenten automatisch installiert. Insgesamt aber trotzdem über 25 GB!

5. Installieren von CUDA-Toolkit

Das CUDA-Toolkit ist ein Toolkit für die Entwicklung von CUDA-Anwendungen, das von NVIDIA bereitgestellt wird. TensorFlow benötigt CUDA, um auf der GPU ausgeführt zu werden. Die in Schritt 1 verlangte Version des CUDA-Toolkits einfach von der NVIDIA-Website herunterladen und installieren: https://developer.nvidia.com/cuda-downloads

6. Installieren der cuDNN-Bibliotheken

cuDNN ist eine Bibliothek von Deep-Learning-Primitiven, die von NVIDIA bereitgestellt wird. TensorFlow benötigt zusätzlich cuDNN, um auf der GPU ausgeführt zu werden. cuDNN ist kostenlos, aber man muss einen Account als NVIDIA Developer erstellen: https://developer.nvidia.com/rdp/cudnn-download

Nach dem Download muss der Inhalt entpackt werden. Der Inhalt wirdin dem Programme Ordner in „NVIDIA GPU Computing Toolkit“ hinein verschoben. Nach dem Verschieben den Dateipfad des „bin“ Ordners kopieren.

7. PATH Variable setzen

Öffne die Umgebungsvariablen in dem du den Begriff einfach in die Windows Suche eingibst. Dann die Systemvariable „path“ bearbeiten und einen neuen Eintrag hinzufügen mit dem Dateipfad des „bin“ Ordners aus dem vorherigem Schritt.

8. Erstellen einer virtuellen Umgebung

Es wird empfohlen, TensorFlow in einer virtuellen Umgebung zu installieren, um Konflikte mit anderen Python-Paketen zu vermeiden. Idealerweise mittels Anaconda. Einfach hier downloaden und installieren: https://www.anaconda.com/download

Anschließend den Anaconda Navigator starten. Unter Environments > Create  neue Umgebung erstellen. Danach wieder auf Home klicken und eine vorhandene Python IDE von hier aus launchen. Es sollten auch zusätzliche IDEs wie PyCharm nach dem Download automatisch hier angezeigt werden.

9. Verifizieren der Tensorflow GPU Unterstützung

Um zu überprüfen, ob die TensorFlow GPU Unterstützung erfolgreich erkannt wurde, sollte zunächst in der Python IDE das Tensorflow Package installiert werden. Aber dabei beachten unter Windows wird die GPU nur bis Version 2.10 erkannt! In den nachfolgenden Versionen nicht mehr! Es muss also Tensorflow 2.10 installiert werden.

Anschließend folgenden Code laufen lassen um eine liste der verfügbaren GPUs anzuzeigen:

import tensorflow as tf

tf.config.list_physical_devices('GPU')

The post Tensorflow GPU aktivieren unter Windows appeared first on Nerd Corner.