nlp assemblyai frontend
1.0.0
该项目是一个基于 Next 的 Web 应用程序，允许用户上传 MP3 音频文件并使用 AssemblyAI API 将其转换为文本。
按照以下说明在本地计算机上设置并运行项目。
确保您已安装以下软件：
克隆存储库：
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm install检查后端存储库 nlp- assemblyai-backend 的 API 端点。
响应示例
{
s"transcript": "This is the transcribed text from the audio file."
}
我已经在 GitHub Pages 上部署了 Next.js 应用程序，这涉及几个步骤，因为 GitHub Pages 主要用于静态站点，而 Next.js 应用程序通常需要服务器。但是，您可以将 Next.js 应用程序的静态导出部署到 GitHub Pages。您可以这样做：
打开next.config.js文件（如果不存在则创建一个）并添加以下配置以将 Next.js 应用程序导出为静态 HTML：
/** @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'告诉 Next.js 生成一个静态站点。images: { unoptimized: true }是必要的。username.github.io/your-repo-name ）提供服务，则basePath非常重要。更新您的package.json脚本以包含用于静态导出的构建命令：
{
"scripts" : {
"build" : " next build " ,
"export" : " next export " ,
"deploy" : " npm run build && npm run export && gh-pages -d out "
}
}export命令将在out目录中生成静态文件。deploy脚本将构建、导出站点并将其部署到 GitHub Pages。gh-pages包安装gh-pages包以处理到 GitHub Pages 的部署：
npm install gh-pages --save-dev在package.json中添加homepage字段以指向您的 GitHub Pages URL：
{
"homepage" : " https://username.github.io/your-repo-name "
}运行以下命令来构建、导出 Next.js 应用程序并将其部署到 GitHub Pages：
npm run deploy此命令将在 GitHub 存储库中创建一个名为gh-pages新分支，并将out目录的内容推送到那里。 GitHub Pages 将自动提供此分支中的文件。
gh-pages分支。您的 Next.js 应用程序现在应该已部署并可通过https://username.github.io/your-repo-name进行访问。
package.json中的homepage字段。 使用next-pwa ，您可以利用渐进式 Web 应用程序 (PWA) 的显着优势，例如提高可发现性、减少内存使用、经济高效的开发以及显着的快速离线性能。任何 Web 应用程序，无论其类型或复杂程度如何，都可以相对轻松地转换为 PWA。将网站转变为渐进式 Web 应用程序需要添加一些功能并修改一些代码，以使网站能够像移动设备上的本机应用程序一样运行。以下是实现此目标的一般步骤。
我们有 Next.js 的 App Router 架构，因此将遵循特定方法。将使用 next-pwa 包来制作 PWA。
yarn add next-pwa && yarn add -D webpack
它描述了您的 PWA，包括其名称、图标和其他详细信息。要创建 Web 应用程序清单，您可以使用 PWA Builder 等工具或手动创建。获得清单文件后，将其添加到网站的根目录中。如果您的模板没有结构化系统，请添加以下行以开始：
使用以下内容更新app/manifest.json (App Router) 或public/manifest.json (Pages Router)：
应用程序/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 />将以下内容添加到您的：
应用程序/布局.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",
};
页面/_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} />
</>
);
}
如果使用自定义 Service Worker，请在app/layout.tsx （App Router）或 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：如果 next-pwa 包不起作用，请使用它（在 Github Pages 上部署为统计站点时，它对我不起作用）
Service Worker 是一个在后台运行并拦截网络请求的 JavaScript 文件，它是现代 PWA 技术的核心元素。 Service Worker 将通过侦听服务器上的网络请求并将其作为 .js 文件放置在用户设备上，负责所有文件缓存、服务器推送通知、内容更新、数据操作等。然后，Service Worker 将监视这些事件并返回适当的响应。
此外，即使用户离线，显示的内容也会根据缓存进行定制。此外，您还可以使用缓存数据作为变量和参数。这意味着虽然第一次加载需要几秒钟，但利用服务工作人员的后续时间应该会更快。因此，这使得 PWA 可以离线工作并快速加载。
您可以通过自己编写代码或使用 Workbox 等工具将 Service Worker 添加到您的网站。您可以复制下面的代码。要使用此代码，请在保存更改之前创建一个新文件并将其命名为sw.js。 next-pwa 处理 Service Worker 设置，因此您无需手动创建。只需确保 Service Worker 在您的应用程序中正确注册即可。
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 * 包装您的 Next 配置更新或创建您的next.config.js
/** @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,
});
如果使用自定义服务工作线程而不是 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;
运行下一个构建后，这将在您的公共环境中生成两个文件：workbox-*.js 和 sw.js，它们将自动静态提供。
Next.js应用程序部署为Github Pages上的静态站点并创建 PWAnext-pwa通常需要在部署到 GitHub Pages 等静态站点时在next.config.js中设置output: 'export' 。npx serve@latest outnext export已被删除，以支持 next.config.js 中的“输出：导出”。
