nlp assemblyai frontend
1.0.0
이 프로젝트는 사용자가 MP3 오디오 파일을 업로드하고 AssemblyAI API를 사용하여 텍스트로 변환할 수 있는 Next 기반 웹 애플리케이션입니다.
로컬 컴퓨터에서 프로젝트를 설정하고 실행하려면 다음 지침을 따르세요.
다음이 설치되어 있는지 확인하십시오.
저장소를 복제합니다.
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm installAPI 엔드포인트에 대해서는 백엔드 저장소인 nlp-assembliesai-backend를 확인하세요.
예시 응답
{
s"transcript": "This is the transcribed text from the audio file."
}
GitHub Pages는 주로 정적 사이트용이지만 Next.js 앱에는 서버가 필요한 경우가 많기 때문에 몇 단계를 거쳐 GitHub Pages에 Next.js 앱을 배포했습니다. 그러나 Next.js 앱의 정적 내보내기를 GitHub 페이지에 배포할 수 있습니다. 방법은 다음과 같습니다.
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 } 정적 호스팅과 호환되지 않는 Next.js 이미지 최적화 기능을 사용하는 경우 필요합니다.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 페이지에 구축, 내보내기 및 배포합니다.gh-pages 패키지 설치 GitHub 페이지 배포를 처리하려면 gh-pages 패키지를 설치하세요.
npm install gh-pages --save-dev GitHub 페이지 URL을 가리키도록 package.json 에 homepage 필드를 추가하세요.
{
"homepage" : " https://username.github.io/your-repo-name "
}다음 명령을 실행하여 Next.js 앱을 GitHub 페이지에 빌드하고 내보내고 배포합니다.
npm run deploy 이 명령은 GitHub 저장소에 gh-pages 라는 새 분기를 생성하고 거기에 out 디렉터리의 내용을 푸시합니다. GitHub 페이지는 자동으로 이 분기의 파일을 제공합니다.
gh-pages 분기를 선택합니다. 이제 Next.js 앱이 배포되고 https://username.github.io/your-repo-name 통해 액세스할 수 있습니다.
package.json 의 homepage 필드를 업데이트하세요. next-pwa 사용하면 검색 가능성 향상, 메모리 사용량 감소, 비용 효율적인 개발, 눈에 띄게 빠른 오프라인 성능 등 PWA(프로그레시브 웹 애플리케이션)의 중요한 이점을 활용할 수 있습니다. 유형이나 복잡성에 관계없이 모든 웹 애플리케이션을 비교적 쉽게 PWA로 변환할 수 있습니다. 웹 사이트를 프로그레시브 웹 앱으로 변환하려면 웹 사이트가 모바일 장치에서 기본 앱처럼 작동할 수 있도록 몇 가지 기능을 추가하고 일부 코드를 수정해야 합니다. 이를 달성하기 위한 일반적인 단계는 다음과 같습니다.
우리는 Next.js의 앱 라우터 아키텍처를 가지고 있으므로 해당 특정 방법을 따를 것입니다. PWA를 만들기 위해 next-pwa 패키지를 사용할 예정입니다.
yarn add next-pwa && yarn add -D webpack
이름, 아이콘 및 기타 세부 정보를 포함하여 PWA에 대해 설명합니다. 웹 앱 매니페스트를 만들려면 PWA Builder와 같은 도구를 사용하거나 수동으로 만들 수 있습니다. 매니페스트 파일이 있으면 웹사이트의 루트 디렉터리에 추가하세요. 템플릿에 대한 구조화된 시스템이 없는 경우 다음 줄을 추가하여 시작하세요.
app/manifest.json (앱 라우터) 또는 public/manifest.json (페이지 라우터)을 다음 콘텐츠로 업데이트합니다.
앱/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 /> 에 메타데이터 추가다음을 추가하세요.
앱/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} />
</>
);
}
맞춤 서비스 워커를 사용하는 경우 app/layout.tsx (앱 라우터) 또는 app.js(페이지 라우터) 헤드에 아래 코드를 추가하세요.
<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 페이지에 통계 사이트로 배포하는 동안에는 작동하지 않았습니다).
서비스 워커는 백그라운드에서 실행되어 네트워크 요청을 가로채는 JavaScript 파일로, 현대 PWA 기술의 핵심 요소입니다. 서비스 워커는 서버에서 네트워크 요청을 수신하고 사용자 장치에 .js 파일을 배치하여 모든 파일 캐싱, 서버 푸시 알림, 콘텐츠 업데이트, 데이터 조작 등을 담당합니다. 그런 다음 서비스 워커는 이러한 이벤트를 모니터링하고 적절한 응답을 반환합니다.
또한, 표시되는 콘텐츠는 사용자가 오프라인일 때에도 캐시된 캐시를 기반으로 맞춤화됩니다. 게다가 캐시 데이터를 변수나 매개변수로 사용할 수도 있습니다. 즉, 첫 번째 로드에는 몇 초가 걸리지만 서비스 워커를 활용하면 이후 로드는 더 빨라집니다. 따라서 이를 통해 PWA는 오프라인으로 작동하고 빠르게 로드할 수 있습니다.
코드를 직접 작성하거나 Workbox와 같은 도구를 사용하여 웹사이트에 서비스 워커를 추가할 수 있습니다. 아래 코드를 복사하시면 됩니다. 이 코드를 사용하려면 변경 사항을 저장하기 전에 새 파일을 만들고 이름을 sw.js 로 지정하세요. next-pwa는 서비스 워커 설정을 처리하므로 수동으로 생성할 필요가 없습니다. 서비스 워커가 앱에 올바르게 등록되었는지 확인하세요.
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 대신 맞춤 서비스 워커를 사용하는 경우 아래 코드를 사용하세요.
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라는 두 개의 파일이 생성되며 자동으로 정적으로 제공됩니다.
Github Pages 에 Next.js 앱을 정적 사이트로 배포하고 PWA 만들기next-pwa 일반적으로 GitHub 페이지와 같은 정적 사이트에 배포할 때 next.config.js 에서 output: 'export' 설정해야 합니다.npx serve@latest outnext export 제거되었으므로 package.json에서 내보내기 스크립트를 제거하세요.
