nlp assemblyai frontend
1.0.0
Este proyecto es una aplicación web basada en Next que permite a los usuarios cargar archivos de audio MP3 y convertirlos a texto utilizando la API AssemblyAI.
Siga estas instrucciones para configurar y ejecutar el proyecto en su máquina local.
Asegúrese de tener instalado lo siguiente:
Clonar el repositorio:
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm installConsulte el repositorio de backend, nlp-assemblyai-backend, para conocer el punto final de API.
Ejemplo de respuesta
{
s"transcript": "This is the transcribed text from the audio file."
}
Implementé la aplicación Next.js en GitHub Pages, lo que implica algunos pasos, ya que GitHub Pages es principalmente para sitios estáticos, mientras que las aplicaciones Next.js a menudo requieren un servidor. Sin embargo, puede implementar una exportación estática de su aplicación Next.js a GitHub Pages. Así es como puedes hacerlo:
Abra su archivo next.config.js (cree uno si no existe) y agregue la siguiente configuración para exportar su aplicación Next.js como HTML estático:
/** @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' le dice a Next.js que genere un sitio estático.images: { unoptimized: true } es necesario si estás utilizando las funciones de optimización de imágenes de Next.js que no son compatibles con el alojamiento estático.basePath es importante si su sitio de GitHub Pages no será servido desde la raíz de un dominio (por ejemplo, username.github.io/your-repo-name ). Actualice sus scripts package.json para incluir un comando de compilación para exportación estática:
{
"scripts" : {
"build" : " next build " ,
"export" : " next export " ,
"deploy" : " npm run build && npm run export && gh-pages -d out "
}
}export generará los archivos estáticos en un directorio out .deploy creará, exportará e implementará su sitio en GitHub Pages.gh-pages Instale el paquete gh-pages para manejar la implementación en GitHub Pages:
npm install gh-pages --save-dev Agregue un campo de homepage en su package.json para que apunte a la URL de sus páginas de GitHub:
{
"homepage" : " https://username.github.io/your-repo-name "
}Ejecute el siguiente comando para crear, exportar e implementar su aplicación Next.js en páginas de GitHub:
npm run deploy Este comando creará una nueva rama llamada gh-pages en su repositorio de GitHub y enviará allí el contenido del directorio out . GitHub Pages entregará automáticamente los archivos de esta rama.
gh-pages . Su aplicación Next.js ahora debería estar implementada y accesible a través de https://username.github.io/your-repo-name .
homepage en package.json en consecuencia. Con next-pwa , puede aprovechar las importantes ventajas de las aplicaciones web progresivas (PWA), como una capacidad de descubrimiento mejorada, un uso reducido de memoria, un desarrollo rentable y un rendimiento sin conexión notablemente rápido. Cualquier aplicación web, independientemente de su tipo o complejidad, se puede convertir en una PWA con relativa facilidad. Transformar un sitio web en una aplicación web progresiva implica agregar algunas funciones y modificar parte del código para permitir que el sitio web funcione como una aplicación nativa en dispositivos móviles. Estos son los pasos generales para lograrlo.
Tenemos la arquitectura App Router de Next.js, por lo que seguiremos esos métodos específicos. Usaremos el paquete next-pwa para crear PWA.
yarn add next-pwa && yarn add -D webpack
Describe su PWA, incluido su nombre, íconos y otros detalles. Para crear el manifiesto de la aplicación web, puede utilizar una herramienta como PWA Builder o crearlo manualmente. Una vez que tenga el archivo de manifiesto, agréguelo al directorio raíz de su sitio web. Si no tiene un sistema estructurado para sus plantillas, agregue estas líneas para comenzar:
Actualice app/manifest.json (enrutador de aplicaciones) o public/manifest.json (enrutador de páginas) con el siguiente contenido:
aplicación/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 />Agregue lo siguiente a su:
aplicación/diseño.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",
};
páginas/_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 utiliza un trabajador de servicio personalizado, agregue el siguiente código en el encabezado de app/layout.tsx (App Router) o 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: use esto si el paquete next-pwa no funciona (no funcionó para mí mientras lo implementaba como un sitio de estadísticas en Github Pages)
Un trabajador de servicio es un archivo JavaScript que se ejecuta en segundo plano e intercepta solicitudes de red, y es el elemento central de la tecnología PWA moderna. El trabajador del servicio será responsable de todo el almacenamiento en caché de archivos, notificaciones push del servidor, actualizaciones de contenido, manipulación de datos, etc., escuchando las solicitudes de red en el servidor y colocándolos como archivos .js en los dispositivos de los usuarios. Luego, el trabajador del servicio monitoreará estos eventos y devolverá la respuesta adecuada.
Además, el contenido mostrado se personaliza en función del caché almacenado incluso cuando el usuario está desconectado. Además, también puedes utilizar datos de caché como variables y parámetros. Esto significa que, aunque la primera carga tarda unos segundos, los tiempos posteriores al aprovechar los trabajadores del servicio deberían ser más rápidos. Por lo tanto, esto permite que una PWA funcione sin conexión y se cargue rápidamente.
Puede agregar un trabajador de servicio a su sitio web escribiendo el código usted mismo o utilizando una herramienta como Workbox. Puede copiar el código a continuación. Para usar este código, cree un nuevo archivo y asígnele el nombre sw.js antes de guardar los cambios. next-pwa maneja la configuración del trabajador del servicio, por lo que no es necesario crear uno manualmente. Solo asegúrese de que el trabajador del servicio esté registrado correctamente en su aplicación.
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 * Actualice o cree su next.config.js con
/** @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,
});
Vaya con el siguiente código si utiliza el trabajador de servicio personalizado en lugar 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;
Después de ejecutar la siguiente compilación, esto generará dos archivos en su público: workbox-*.js y sw.js, que se entregarán automáticamente de forma estática.
Next.js como sitio estático en Github Pages y creación de PWAnext-pwa generalmente requiere configurar la output: 'export' en next.config.js cuando se implementa en sitios estáticos como GitHub Pages.npx serve@latest outnext export se eliminó en favor de 'salida: exportar' en next.config.js.
