nlp assemblyai frontend
1.0.0
Ce projet est une application Web basée sur Next qui permet aux utilisateurs de télécharger des fichiers audio MP3 et de les convertir en texte à l'aide de l'API AssemblyAI.
Suivez ces instructions pour configurer et exécuter le projet sur votre ordinateur local.
Assurez-vous que les éléments suivants sont installés :
Clonez le dépôt :
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm installVérifiez le référentiel backend, nlp-assemblyai-backend, pour le point de terminaison de l'API.
Exemple de réponse
{
s"transcript": "This is the transcribed text from the audio file."
}
J'ai déployé l'application Next.js sur les pages GitHub, ce qui implique quelques étapes, car les pages GitHub sont principalement destinées aux sites statiques, alors que les applications Next.js nécessitent souvent un serveur. Cependant, vous pouvez déployer une exportation statique de votre application Next.js vers les pages GitHub. Voici comment procéder :
Ouvrez votre fichier next.config.js (créez-en un s'il n'existe pas) et ajoutez la configuration suivante pour exporter votre application Next.js au format HTML statique :
/** @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' indique à Next.js de générer un site statique.images: { unoptimized: true } est nécessaire si vous utilisez les fonctionnalités d'optimisation d'image Next.js qui ne sont pas compatibles avec l'hébergement statique.basePath est important si votre site GitHub Pages ne sera pas servi à partir de la racine d'un domaine (par exemple, username.github.io/your-repo-name ). Mettez à jour vos scripts package.json pour inclure une commande de build pour l'exportation statique :
{
"scripts" : {
"build" : " next build " ,
"export" : " next export " ,
"deploy" : " npm run build && npm run export && gh-pages -d out "
}
}export générera les fichiers statiques dans un répertoire out .deploy créera, exportera et déploiera votre site sur les pages GitHub.gh-pages Installez le package gh-pages pour gérer le déploiement sur les pages GitHub :
npm install gh-pages --save-dev Ajoutez un champ homepage dans votre package.json pour pointer vers l'URL de vos pages GitHub :
{
"homepage" : " https://username.github.io/your-repo-name "
}Exécutez la commande suivante pour créer, exporter et déployer votre application Next.js sur les pages GitHub :
npm run deploy Cette commande créera une nouvelle branche nommée gh-pages dans votre référentiel GitHub et y transférera le contenu du répertoire out . Les pages GitHub serviront automatiquement les fichiers de cette branche.
gh-pages . Votre application Next.js devrait maintenant être déployée et accessible via https://username.github.io/your-repo-name .
homepage dans package.json en conséquence. En utilisant next-pwa , vous pouvez tirer parti des avantages significatifs des applications Web progressives (PWA), tels qu'une meilleure visibilité, une utilisation réduite de la mémoire, un développement rentable et des performances hors ligne particulièrement rapides. Toute application Web, quel que soit son type ou sa complexité, peut être convertie en PWA avec une relative facilité. Transformer un site Web en Progressive Web App implique d'ajouter quelques fonctionnalités et de modifier du code pour permettre au site Web de fonctionner comme une application native sur les appareils mobiles. Voici les étapes générales pour y parvenir.
Nous avons l'architecture App Router de Next.js, nous suivrons donc ces méthodes spécifiques. J'utiliserai le package next-pwa pour créer des PWA.
yarn add next-pwa && yarn add -D webpack
Il décrit votre PWA, y compris son nom, ses icônes et d'autres détails. Pour créer le manifeste de l'application Web, vous pouvez utiliser un outil tel que PWA Builder ou le créer manuellement. Une fois que vous disposez du fichier manifeste, ajoutez-le au répertoire racine de votre site Web. Si vous ne disposez pas d'un système structuré pour vos modèles, ajoutez ces lignes pour commencer :
Mettez à jour app/manifest.json (App Router) ou public/manifest.json (Pages Router) avec le contenu suivant :
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 />Ajoutez ce qui suit à votre :
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",
};
pages/_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} />
</>
);
}
si vous utilisez un service worker personnalisé, ajoutez le code ci-dessous dans l'en-tête de app/layout.tsx (App Router) ou app.js (Page Router)
<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 : utilisez-le si le package next-pwa ne fonctionne pas (cela n'a pas fonctionné pour moi lors du déploiement en tant que site de statistiques sur les pages Github)
Un service worker est un fichier JavaScript qui s'exécute en arrière-plan et intercepte les requêtes réseau. Il constitue l'élément central de la technologie PWA moderne. Le Service Worker sera responsable de toute la mise en cache des fichiers, des notifications push du serveur, des mises à jour du contenu, de la manipulation des données, etc., en écoutant les requêtes réseau sur le serveur et en plaçant des fichiers .js sur les appareils des utilisateurs. Le Service Worker surveillera ensuite ces événements et renverra la réponse appropriée.
De plus, le contenu affiché est personnalisé en fonction du cache mis en cache même lorsque l'utilisateur est hors ligne. En outre, vous pouvez également utiliser les données du cache comme variables et paramètres. Cela signifie que même si le premier chargement prend quelques secondes, les temps suivants en faisant appel aux techniciens de service devraient être plus rapides. Cela permet donc à une PWA de fonctionner hors ligne et de se charger rapidement.
Vous pouvez ajouter un service worker à votre site Web en écrivant le code vous-même ou en utilisant un outil comme Workbox. Vous pouvez copier le code ci-dessous. Pour utiliser ce code, créez un nouveau fichier et nommez- le sw.js avant d'enregistrer vos modifications. next-pwa gère la configuration du service worker, vous n'avez donc pas besoin d'en créer un manuellement. Assurez-vous simplement que le technicien de service est correctement enregistré dans votre application.
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 * Mettez à jour ou créez votre next.config.js avec
/** @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,
});
Utilisez le code ci-dessous si vous utilisez un service worker personnalisé au lieu de next-pwa
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;
Après avoir exécuté la prochaine version, cela générera deux fichiers dans votre public : workbox-*.js et sw.js, qui seront automatiquement servis de manière statique.
Next.js en tant que site statique sur Github Pages et création de PWAnext-pwa nécessite généralement de définir la output: 'export' dans le next.config.js lors du déploiement sur des sites statiques comme les pages GitHub.npx serve@latest outnext export a été supprimée au profit de « sortie : exportation » dans next.config.js.
