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 中的「輸出：匯出」。
