nlp assemblyai frontend
1.0.0
Bei diesem Projekt handelt es sich um eine Next-basierte Webanwendung, die es Benutzern ermöglicht, MP3-Audiodateien hochzuladen und diese mithilfe der AssemblyAI-API in Text umzuwandeln.
Befolgen Sie diese Anweisungen, um das Projekt auf Ihrem lokalen Computer einzurichten und auszuführen.
Stellen Sie sicher, dass Folgendes installiert ist:
Klonen Sie das Repository:
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm installÜberprüfen Sie das Backend-Repository nlp-assemblyai-backend auf den API-Endpunkt.
Beispielantwort
{
s"transcript": "This is the transcribed text from the audio file."
}
Ich habe die Next.js-App auf GitHub Pages bereitgestellt, was ein paar Schritte erfordert, da GitHub Pages hauptsächlich für statische Websites gedacht ist, während Next.js-Apps oft einen Server erfordern. Sie können jedoch einen statischen Export Ihrer Next.js-App auf GitHub Pages bereitstellen. So können Sie es machen:
Öffnen Sie Ihre next.config.js -Datei (erstellen Sie eine, falls sie noch nicht vorhanden ist) und fügen Sie die folgende Konfiguration hinzu, um Ihre Next.js-App als statisches HTML zu exportieren:
/** @type {import('next').NextConfig} */
const nextConfig = {
output : "export" ,
images : {
unoptimized : true , // Disable Image Optimization if needed
} ,
trailingSlash : true , // Adds trailing slash to all routes
basePath : "/your-repo-name" , // Replace with your GitHub repository name
} ;
module . exports = nextConfig ;output: 'export' weist Next.js an, eine statische Site zu generieren.images: { unoptimized: true } ist erforderlich, wenn Sie Next.js-Bildoptimierungsfunktionen verwenden, die nicht mit statischem Hosting kompatibel sind.basePath ist wichtig, wenn Ihre GitHub Pages-Site nicht vom Stammverzeichnis einer Domain aus bedient wird (z. B. username.github.io/your-repo-name ). Aktualisieren Sie Ihre package.json -Skripts so, dass sie einen Build-Befehl für den statischen Export enthalten:
{
"scripts" : {
"build" : " next build " ,
"export" : " next export " ,
"deploy" : " npm run build && npm run export && gh-pages -d out "
}
}export generiert die statischen Dateien in einem out -Verzeichnis.deploy erstellt, exportiert und stellt Ihre Site auf GitHub Pages bereit.gh-pages -Paket Installieren Sie das gh-pages -Paket, um die Bereitstellung auf GitHub Pages durchzuführen:
npm install gh-pages --save-dev Fügen Sie in Ihrer package.json ein homepage Feld hinzu, um auf Ihre GitHub-Seiten-URL zu verweisen:
{
"homepage" : " https://username.github.io/your-repo-name "
}Führen Sie den folgenden Befehl aus, um Ihre Next.js-App zu erstellen, zu exportieren und auf GitHub Pages bereitzustellen:
npm run deploy Dieser Befehl erstellt einen neuen Zweig mit dem Namen gh-pages in Ihrem GitHub-Repository und überträgt den Inhalt des out -Verzeichnisses dorthin. GitHub Pages stellt die Dateien aus diesem Zweig automatisch bereit.
gh-pages aus. Ihre Next.js-App sollte jetzt bereitgestellt und über https://username.github.io/your-repo-name zugänglich sein.
homepage Feld in package.json entsprechend. Mit next-pwa können Sie die wesentlichen Vorteile von Progressive Web Applications (PWAs) nutzen, wie z. B. verbesserte Auffindbarkeit, reduzierte Speichernutzung, kostengünstige Entwicklung und besonders schnelle Offline-Leistung. Jede Webanwendung, unabhängig von ihrer Art oder Komplexität, kann relativ einfach in eine PWA umgewandelt werden. Um eine Website in eine Progressive Web App umzuwandeln, müssen einige Funktionen hinzugefügt und Code geändert werden, damit die Website auf Mobilgeräten wie eine native App funktioniert. Hier sind die allgemeinen Schritte, um dies zu erreichen.
Wir haben die App-Router-Architektur von Next.js und werden daher diese spezifischen Methoden befolgen. Ich werde das Next-PWA-Paket verwenden, um PWA zu erstellen.
yarn add next-pwa && yarn add -D webpack
Es beschreibt Ihre PWA, einschließlich ihres Namens, ihrer Symbole und anderer Details. Um das Web-App-Manifest zu erstellen, können Sie ein Tool wie PWA Builder verwenden oder es manuell erstellen. Sobald Sie die Manifestdatei haben, fügen Sie sie dem Stammverzeichnis Ihrer Website hinzu. Wenn Sie kein strukturiertes System für Ihre Vorlagen haben, fügen Sie zunächst diese Zeilen hinzu:
Aktualisieren Sie app/manifest.json (App Router) oder public/manifest.json (Pages Router) mit dem folgenden Inhalt:
app/manifest.json
{
"name": "nlp_pwa",
"short_name": "nlp_pwa",
"description": "Your App Description",
"start_url": "/",
"icons": [
{
"src": "./196.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffee00",
"background_color": "#ffee00",
"display": "standalone"
}
<head /> hinzufügenFügen Sie Folgendes zu Ihrem hinzu:
app/layout.tsx
import type { Metadata, Viewport } from "next";
const APP_NAME = "PWA App";
const APP_DEFAULT_TITLE = "My Awesome PWA App";
const APP_TITLE_TEMPLATE = "%s - PWA App";
const APP_DESCRIPTION = "Best PWA app in the world!";
export const metadata: Metadata = {
applicationName: APP_NAME,
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
},
description: APP_DESCRIPTION,
manifest: "/manifest.json",
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: APP_DEFAULT_TITLE,
// startUpImage: [],
},
formatDetection: {
telephone: false,
},
openGraph: {
type: "website",
siteName: APP_NAME,
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
},
description: APP_DESCRIPTION,
},
twitter: {
card: "summary",
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
},
description: APP_DESCRIPTION,
},
};
export const viewport: Viewport = {
themeColor: "#FFFFFF",
};
seiten/_app.tsx
import type { AppProps } from "next/app";
import Head from "next/head";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>My awesome PWA app</title>
<meta name="description" content="Best PWA app in the world!" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="mask-icon" href="/icons/mask-icon.svg" color="#FFFFFF" />
<meta name="theme-color" content="#ffffff" />
<link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" />
<link
rel="apple-touch-icon"
sizes="152x152"
href="/icons/touch-icon-ipad.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/icons/touch-icon-iphone-retina.png"
/>
<link
rel="apple-touch-icon"
sizes="167x167"
href="/icons/touch-icon-ipad-retina.png"
/>
<link rel="manifest" href="/manifest.json" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://yourdomain.com" />
<meta name="twitter:title" content="My awesome PWA app" />
<meta name="twitter:description" content="Best PWA app in the world!" />
<meta name="twitter:image" content="/icons/twitter.png" />
<meta name="twitter:creator" content="@DavidWShadow" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My awesome PWA app" />
<meta property="og:description" content="Best PWA app in the world!" />
<meta property="og:site_name" content="My awesome PWA app" />
<meta property="og:url" content="https://yourdomain.com" />
<meta property="og:image" content="/icons/og.png" />
{/* add the following only if you want to add a startup image for Apple devices. */}
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_2048.png"
sizes="2048x2732"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1668.png"
sizes="1668x2224"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1536.png"
sizes="1536x2048"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1125.png"
sizes="1125x2436"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1242.png"
sizes="1242x2208"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_750.png"
sizes="750x1334"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_640.png"
sizes="640x1136"
/>
</Head>
<Component {...pageProps} />
</>
);
}
Wenn Sie einen benutzerdefinierten Service Worker verwenden, fügen Sie den folgenden Code im Kopf von app/layout.tsx (App Router) oder app.js (Page Router) hinzu.
<head>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="/196.png" />
<meta name="mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
{/* <!-- iOS Splash Screens --> */}
<link
href="/splashscreens/iphone5_splash.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
</head>
imp: Verwenden Sie dies, wenn das Next-PWA-Paket nicht funktioniert (Bei mir hat es bei der Bereitstellung als Statistik-Site auf Github-Seiten nicht funktioniert)
Ein Service Worker ist eine JavaScript-Datei, die im Hintergrund läuft und Netzwerkanfragen abfängt und das Kernelement der modernen PWA-Technologie ist. Der Servicemitarbeiter ist für das gesamte Datei-Caching, Server-Push-Benachrichtigungen, Inhaltsaktualisierungen, Datenmanipulationen usw. verantwortlich, indem er Netzwerkanfragen auf dem Server abhört und als .js-Dateien auf Benutzergeräten ablegt. Der Servicemitarbeiter überwacht dann diese Ereignisse und gibt die entsprechende Antwort zurück.
Darüber hinaus wird der angezeigte Inhalt basierend auf dem zwischengespeicherten Cache angepasst, auch wenn der Benutzer offline ist. Darüber hinaus können Sie Cache-Daten auch als Variablen und Parameter verwenden. Das bedeutet, dass das erste Laden zwar einige Sekunden dauert, die Folgezeiten durch den Einsatz von Servicemitarbeitern jedoch schneller sein sollten. Dadurch kann eine PWA offline arbeiten und schnell geladen werden.
Sie können Ihrer Website einen Servicemitarbeiter hinzufügen, indem Sie den Code selbst schreiben oder ein Tool wie Workbox verwenden. Sie können den Code unten kopieren. Um diesen Code zu verwenden, erstellen Sie eine neue Datei und nennen Sie sie sw.js, bevor Sie Ihre Änderungen speichern. next-pwa übernimmt die Einrichtung des Servicemitarbeiters, sodass Sie keinen manuell erstellen müssen. Stellen Sie einfach sicher, dass der Servicemitarbeiter korrekt in Ihrer App registriert ist.
update public/service-worker.js
const CACHE_NAME = "my-pwa-cache-v1";
const urlsToCache = ["/"]; // add other urls that needs to be cached
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
self.addEventListener("activate", (event) => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then((keyList) =>
Promise.all(
keyList.map((key) => {
if (!cacheWhitelist.includes(key)) {
return caches.delete(key);
}
})
)
)
);
});
withPWA * Aktualisieren oder erstellen Sie Ihre next.config.js mit
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
compiler: {
removeConsole: process.env.NODE_ENV !== "development",
},
};
const withPWA = require("next-pwa")({
dest: "public",
disable: process.env.NODE_ENV === "development",
register: true,
});
module.exports = withPWA(nextConfig);
const nextConfig = {};
const withPWA = require("@ducanh2912/next-pwa").default({
dest: "public",
disable: process.env.NODE_ENV === "development",
runtimeCaching: [
{
urlPattern: /^https://fonts.(googleapis|gstatic).com/.*/i,
handler: "CacheFirst",
options: {
cacheName: "google-fonts",
expiration: {
maxEntries: 4,
maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
},
},
},
{
urlPattern: /^https://cdnjs.cloudflare.com/.*/i,
handler: "CacheFirst",
options: {
cacheName: "static-resources",
expiration: {
maxEntries: 20,
maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
},
},
},
{
urlPattern: /.(?:png|jpg|jpeg|svg|gif|ico)$/i,
handler: "CacheFirst",
options: {
cacheName: "images",
expiration: {
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
},
},
},
{
urlPattern: /^/(?!api/).*/i,
handler: "NetworkFirst",
options: {
cacheName: "pages",
expiration: {
maxEntries: 50,
maxAgeSeconds: 24 * 60 * 60, // 1 day
},
},
},
],
});
module.exports = withPWA({
...nextConfig,
});
Verwenden Sie den folgenden Code, wenn Sie Custom Service Worker anstelle von Next-PWA verwenden
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
output: "export", //remove this line if not expoerting as a static site
compiler: {
removeConsole: process.env.NODE_ENV !== "development",
},
};
module.exports = nextConfig;
Nach der Ausführung des nächsten Builds werden zwei Dateien in Ihrer Öffentlichkeit generiert: workbox-*.js und sw.js, die automatisch statisch bereitgestellt werden.
Next.js -App als statische Site auf Github Pages und Erstellen einer PWAnext-pwa normalerweise das Festlegen der output: 'export' in next.config.js .npx serve@latest outnext export zugunsten von „output: export“ in next.config.js entfernt wurde.
