nlp assemblyai frontend
1.0.0
このプロジェクトは、ユーザーが MP3 オーディオ ファイルをアップロードし、AssemblyAI API を使用してテキストに変換できるようにする Next ベースの Web アプリケーションです。
次の手順に従って、ローカル マシン上でプロジェクトをセットアップして実行します。
以下がインストールされていることを確認してください。
リポジトリのクローンを作成します。
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パッケージをインストールするGitHub Pages へのデプロイメントを処理するには、 gh-pagesパッケージをインストールします。
npm install gh-pages --save-dev package.jsonにhomepageフィールドを追加して、GitHub ページの 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 サイトをプログレッシブ Web アプリに変換するには、Web サイトがモバイル デバイス上のネイティブ アプリのように機能できるようにするために、いくつかの機能を追加し、コードを変更する必要があります。これを達成するための一般的な手順は次のとおりです。
Next.js の App Router アーキテクチャがあるので、その特定のメソッドに従います。 PWAを作成するにはnext-pwaパッケージを使用します。
yarn add next-pwa && yarn add -D webpack
ここでは、名前、アイコン、その他の詳細を含めて、PWA について説明します。 Web アプリ マニフェストを作成するには、PWA Builder などのツールを使用するか、手動で作成できます。マニフェスト ファイルを取得したら、それを Web サイトのルート ディレクトリに追加します。テンプレート用の構造化システムがない場合は、次の行を追加して開始します。
app/manifest.json (App Router) またはpublic/manifest.json (Pages Router) を次の内容で更新します。
アプリ/マニフェスト.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 />にメタデータを追加する以下を追加します。
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",
};
ページ/_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 で統計サイトとしてデプロイしている間は機能しませんでした)
サービス ワーカーは、バックグラウンドで実行され、ネットワーク リクエストをインターセプトする JavaScript ファイルであり、最新の PWA テクノロジの中核要素です。 Service Worker は、サーバー上でネットワーク リクエストをリッスンし、.js ファイルとしてユーザー デバイスに配置することにより、すべてのファイル キャッシュ、サーバー プッシュ通知、コンテンツ更新、データ操作などを担当します。 Service Worker はこれらのイベントを監視し、適切な応答を返します。
さらに、ユーザーがオフラインの場合でも、表示されるコンテンツはキャッシュされたキャッシュに基づいてカスタマイズされます。さらに、キャッシュ データを変数やパラメーターとして使用することもできます。これは、最初のロードには数秒かかりますが、Service Worker を利用することでその後のロードが高速になることを意味します。したがって、これにより、PWA はオフラインで動作し、迅速に読み込むことができます。
Service Worker を Web サイトに追加するには、コードを自分で記述するか、Workbox などのツールを使用します。以下のコードをコピーできます。このコードを使用するには、変更を保存する前に、新しいファイルを作成し、 sw.js という名前を付けます。 next-pwa は Service Worker のセットアップを処理するため、手動で 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.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 の代わりにカスタム Service Worker を使用する場合は、以下のコードを使用します。
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 という 2 つのファイルがパブリックに生成され、自動的に静的に提供されます。
Next.jsアプリをGithub Pagesの静的サイトとしてデプロイし、PWA を作成するnext-pwaでは通常、GitHub Pages などの静的サイトにデプロイするときに、 next.config.jsでoutput: 'export'を設定する必要があります。npx serve@latest outnext exportが削除されたため、package.json からエクスポート スクリプトを削除します。
