nlp assemblyai frontend
1.0.0
Этот проект представляет собой веб-приложение на базе Next, которое позволяет пользователям загружать аудиофайлы MP3 и преобразовывать их в текст с помощью API AssemblyAI.
Следуйте этим инструкциям, чтобы настроить и запустить проект на локальном компьютере.
Убедитесь, что у вас установлено следующее:
Клонируем репозиторий:
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."
}
Я развернул приложение Next.js на страницах GitHub, что включает в себя несколько шагов, поскольку страницы GitHub в первую очередь предназначены для статических сайтов, тогда как приложениям 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, которые несовместимы со статическим хостингом.basePath важен, если ваш сайт GitHub Pages не будет обслуживаться из корня домена (например, username.github.io/your-repo-name ). Обновите скрипты 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:
npm install gh-pages --save-dev Добавьте поле homepage в свой package.json , чтобы указать URL-адрес вашей страницы GitHub:
{
"homepage" : " https://username.github.io/your-repo-name "
}Выполните следующую команду, чтобы создать, экспортировать и развернуть приложение Next.js на страницах GitHub:
npm run deploy Эта команда создаст новую ветку с именем gh-pages в вашем репозитории GitHub и отправит туда содержимое out каталога. GitHub Pages будет автоматически обслуживать файлы из этой ветки.
gh-pages . Теперь ваше приложение Next.js должно быть развернуто и доступно через https://username.github.io/your-repo-name .
homepage в package.json . Используя next-pwa , вы можете воспользоваться значительными преимуществами прогрессивных веб-приложений (PWA), такими как улучшенная обнаруживаемость, снижение использования памяти, экономичность разработки и особенно высокая производительность в автономном режиме. Любое веб-приложение, независимо от его типа и сложности, можно относительно легко преобразовать в PWA. Преобразование веб-сайта в прогрессивное веб-приложение включает добавление нескольких функций и изменение некоторого кода, чтобы веб-сайт функционировал как нативное приложение на мобильных устройствах. Вот общие шаги для достижения этой цели.
У нас есть архитектура App Router 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 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>
имп: используйте это, если пакет next-pwa не работает (у меня он не работал при развертывании в качестве сайта статистики на страницах Github)
Сервис-воркер — это файл JavaScript, который работает в фоновом режиме и перехватывает сетевые запросы. Это основной элемент современной технологии PWA. Service Worker будет отвечать за все кэширование файлов, push-уведомления сервера, обновления контента, манипулирование данными и т. д., прослушивая сетевые запросы на сервере и размещая файлы .js на пользовательских устройствах. Затем Service Worker будет отслеживать эти события и возвращать соответствующий ответ.
Кроме того, отображаемый контент настраивается на основе кэшированного кеша, даже когда пользователь находится в автономном режиме. Кроме того, вы также можете использовать данные кэша в качестве переменных и параметров. Это означает, что хотя первая загрузка занимает несколько секунд, последующие загрузки с использованием сервис-воркеров должны быть быстрее. Таким образом, это позволяет 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, которые будут автоматически обслуживаться статически.
Next.js в качестве статического сайта на Github Pages и создание PWAnext-pwa обычно требует установки output: 'export' в файле next.config.js при развертывании на статических сайтах, таких как GitHub Pages.npx serve@latest outnext export был удален в пользу «вывода: экспорт» в next.config.js.
