nlp assemblyai frontend
1.0.0
Este projeto é um aplicativo da web baseado em Next que permite aos usuários fazer upload de arquivos de áudio MP3 e convertê-los em texto usando a API AssemblyAI.
Siga estas instruções para configurar e executar o projeto em sua máquina local.
Certifique-se de ter o seguinte instalado:
Clone o repositório:
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm installVerifique o repositório de back-end, nlp-assemblyai-backend, para o endpoint da API.
Exemplo de resposta
{
s"transcript": "This is the transcribed text from the audio file."
}
Implantei o aplicativo Next.js no GitHub Pages, o que envolve algumas etapas, já que o GitHub Pages é principalmente para sites estáticos, enquanto os aplicativos Next.js geralmente exigem um servidor. No entanto, você pode implantar uma exportação estática do seu aplicativo Next.js para GitHub Pages. Veja como você pode fazer isso:
Abra seu arquivo next.config.js (crie um se ele não existir) e adicione a seguinte configuração para exportar seu aplicativo 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' diz ao Next.js para gerar um site estático.images: { unoptimized: true } é necessário se você estiver usando recursos de otimização de imagem Next.js que não são compatíveis com hospedagem estática.basePath é importante se o seu site GitHub Pages não for servido a partir da raiz de um domínio (por exemplo, username.github.io/your-repo-name ). Atualize seus scripts package.json para incluir um comando de construção para exportação estática:
{
"scripts" : {
"build" : " next build " ,
"export" : " next export " ,
"deploy" : " npm run build && npm run export && gh-pages -d out "
}
}export irá gerar os arquivos estáticos em um diretório out .deploy criará, exportará e implantará seu site nas páginas do GitHub.gh-pages Instale o pacote gh-pages para lidar com a implantação nas páginas do GitHub:
npm install gh-pages --save-dev Adicione um campo homepage em seu package.json para apontar para o URL de suas páginas do GitHub:
{
"homepage" : " https://username.github.io/your-repo-name "
}Execute o seguinte comando para criar, exportar e implantar seu aplicativo Next.js nas páginas do GitHub:
npm run deploy Este comando criará um novo branch chamado gh-pages em seu repositório GitHub e enviará o conteúdo do diretório out para lá. As páginas do GitHub servirão automaticamente os arquivos deste branch.
gh-pages . Seu aplicativo Next.js agora deve ser implantado e acessível via https://username.github.io/your-repo-name .
homepage em package.json adequadamente. Usando next-pwa , você pode aproveitar as vantagens significativas dos Progressive Web Applications (PWAs), como capacidade de descoberta aprimorada, uso reduzido de memória, desenvolvimento econômico e desempenho offline notavelmente rápido. Qualquer aplicação web, independentemente do seu tipo ou complexidade, pode ser convertida em um PWA com relativa facilidade. Transformar um site em um Progressive Web App envolve adicionar alguns recursos e modificar alguns códigos para permitir que o site funcione como um aplicativo nativo em dispositivos móveis. Aqui estão as etapas gerais para conseguir isso.
Temos a arquitetura App Router do Next.js, portanto seguiremos esses métodos específicos. Estarei usando o pacote next-pwa para fazer o PWA.
yarn add next-pwa && yarn add -D webpack
Ele descreve seu PWA, incluindo nome, ícones e outros detalhes. Para criar o manifesto do aplicativo web, você pode usar uma ferramenta como o PWA Builder ou criá-lo manualmente. Assim que tiver o arquivo de manifesto, adicione-o ao diretório raiz do seu site. Se você não possui um sistema estruturado para seus modelos, adicione estas linhas para começar:
Atualize app/manifest.json (App Router) ou public/manifest.json (Pages Router) com o seguinte conteúdo:
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 />Adicione o seguinte ao seu:
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",
};
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} />
</>
);
}
se estiver usando um service worker personalizado, adicione o código abaixo no cabeçalho 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: use isto se o pacote next-pwa não funcionar (não funcionou para mim durante a implantação como um site de estatísticas nas páginas do Github)
Um service worker é um arquivo JavaScript executado em segundo plano e intercepta solicitações de rede e é o elemento central da tecnologia PWA moderna. O Service Worker será responsável por todo o cache de arquivos, notificações push do servidor, atualizações de conteúdo, manipulação de dados, etc., ouvindo solicitações de rede no servidor e colocando arquivos .js nos dispositivos do usuário. O Service Worker monitorará esses eventos e retornará a resposta apropriada.
Além disso, o conteúdo exibido é personalizado com base no cache armazenado, mesmo quando o usuário está offline. Além disso, você também pode usar dados de cache como variáveis e parâmetros. Isso significa que, embora o primeiro carregamento demore alguns segundos, os tempos subsequentes, aproveitando os service workers, devem ser mais rápidos. Portanto, isso permite que um PWA funcione offline e carregue rapidamente.
Você pode adicionar um service worker ao seu site escrevendo o código você mesmo ou usando uma ferramenta como o Workbox. Você pode copiar o código abaixo. Para usar este código, crie um novo arquivo e nomeie-o como sw.js antes de salvar suas alterações. next-pwa cuida da configuração do service worker, então você não precisa criar um manualmente. Apenas certifique-se de que o service worker esteja corretamente registrado em seu aplicativo.
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 * Atualize ou crie seu next.config.js com
/** @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,
});
Vá com o código abaixo se estiver usando o service worker personalizado em vez do 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;
Após executar a próxima compilação, serão gerados dois arquivos em seu público: workbox-*.js e sw.js, que serão automaticamente veiculados estaticamente.
Next.js como site estático nas Github Pages e criando PWAnext-pwa normalmente requer a configuração da output: 'export' em next.config.js ao implantar em sites estáticos como GitHub Pages.npx serve@latest outnext export foi removida em favor de 'output: export' em next.config.js.
