Integrate custom Web GUI assets, templates, and config.yaml; adapt for LocalAI
Mirror and run GitLab CI / build (push) Has been cancelled
Mirror and run GitLab CI / build (push) Has been cancelled
This commit is contained in:
admin
+14
-9
@@ -5,9 +5,9 @@ FROM python:3.11-slim
|
|||||||
LABEL maintainer="Jacob Schmieder"
|
LABEL maintainer="Jacob Schmieder"
|
||||||
LABEL email="Jacob.Schmieder@dbfz.de"
|
LABEL email="Jacob.Schmieder@dbfz.de"
|
||||||
LABEL version="0.1.1.dev"
|
LABEL version="0.1.1.dev"
|
||||||
LABEL description="Scraibe: LocalAI-backed transcription and diarization client with summarization. \
|
LABEL description="Scraibe: LocalAI-backed transcription and diarization client with summarization and custom Web GUI. \
|
||||||
Sends audio to a LocalAI server running vibevoice.cpp and uses a second LLM for summarization."
|
Sends audio to a LocalAI server running vibevoice.cpp and uses a second LLM for summarization."
|
||||||
LABEL url="https://github.com/JSchmie/ScrAIbe"
|
LABEL url="https://git.optimex.systems/admin/scribe"
|
||||||
|
|
||||||
# Install system dependencies (ffmpeg required)
|
# Install system dependencies (ffmpeg required)
|
||||||
RUN apt update -y && \
|
RUN apt update -y && \
|
||||||
@@ -16,27 +16,32 @@ RUN apt update -y && \
|
|||||||
rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
|
rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
|
||||||
|
|
||||||
# Working directory
|
# Working directory
|
||||||
WORKDIR /app
|
WORKDIR /app/src
|
||||||
|
|
||||||
# Environment variables for LocalAI (transcription/diarization)
|
# Environment variables for LocalAI (transcription/diarization)
|
||||||
# Set these via docker run -e or docker-compose
|
|
||||||
ENV LOCALAI_API_URL=http://localhost:8080
|
ENV LOCALAI_API_URL=http://localhost:8080
|
||||||
ENV LOCALAI_API_KEY=
|
ENV LOCALAI_API_KEY=
|
||||||
ENV LOCALAI_MODEL=vibevoice-diarize
|
ENV LOCALAI_MODEL=vibevoice-cpp-asr
|
||||||
|
|
||||||
# Environment variables for Summarizer LLM
|
# Environment variables for Summarizer LLM
|
||||||
ENV SUMMARIZER_API_URL=http://localhost:8080
|
ENV SUMMARIZER_API_URL=http://localhost:8080
|
||||||
ENV SUMMARIZER_API_KEY=
|
ENV SUMMARIZER_API_KEY=
|
||||||
ENV SUMMARIZER_MODEL=llama-3.1-8b-instruct
|
ENV SUMMARIZER_MODEL=qwen3-14b
|
||||||
|
|
||||||
|
# Gradio / Web GUI
|
||||||
|
ENV GRADIO_SERVER_NAME=0.0.0.0
|
||||||
|
|
||||||
# Copy and install Python dependencies
|
# Copy and install Python dependencies
|
||||||
COPY requirements.txt /app/requirements.txt
|
COPY requirements.txt /app/src/requirements.txt
|
||||||
RUN pip install --no-cache-dir -r requirements.txt
|
RUN pip install --no-cache-dir -r requirements.txt
|
||||||
|
|
||||||
# Copy application code
|
# Copy application code
|
||||||
COPY scraibe /app/scraibe
|
COPY scraibe /app/src/scraibe
|
||||||
|
|
||||||
# Expose port (if UI is served)
|
# Copy custom Web GUI assets (header, footer, templates, logos, config)
|
||||||
|
COPY misc /app/src/misc
|
||||||
|
|
||||||
|
# Expose port (for Web GUI)
|
||||||
EXPOSE 7860
|
EXPOSE 7860
|
||||||
|
|
||||||
# Run the application
|
# Run the application
|
||||||
|
|||||||
@@ -0,0 +1,101 @@
|
|||||||
|
## Custom configuration for A.P.Strom Transcription (LocalAI-backed)
|
||||||
|
## Lines that start with ## are comment lines.
|
||||||
|
|
||||||
|
interface_type: async # async or simple (one does transcriptions, requires Email setup)
|
||||||
|
|
||||||
|
launch:
|
||||||
|
## Gradio launch options (if using WebUI)
|
||||||
|
# server_port: null
|
||||||
|
# server_name: "A.P.Strom Transcription"
|
||||||
|
# inline: false
|
||||||
|
# inbrowser: false
|
||||||
|
# share: false
|
||||||
|
# debug: false
|
||||||
|
max_threads: 18
|
||||||
|
# quiet: false
|
||||||
|
# auth: null # tuple of username and password
|
||||||
|
# auth_message: null
|
||||||
|
# prevent_thread_lock: false
|
||||||
|
# show_error: false
|
||||||
|
# height: 500
|
||||||
|
# width: 100%
|
||||||
|
favicon_path: /app/src/misc/logo.png
|
||||||
|
# ssl_keyfile: null
|
||||||
|
# ssl_certfile: null
|
||||||
|
# ssl_keyfile_password: null
|
||||||
|
# ssl_verify: false
|
||||||
|
# show_api: false
|
||||||
|
# allowed_paths:
|
||||||
|
# blocked_paths: null
|
||||||
|
# root_path: null
|
||||||
|
# app_kwargs: null
|
||||||
|
# state_session_capacity: 10000
|
||||||
|
# share_server_address: null
|
||||||
|
# share_server_protocol: null
|
||||||
|
# max_file_size: null
|
||||||
|
# enable_monitoring: null
|
||||||
|
|
||||||
|
queue:
|
||||||
|
## Queue configuration
|
||||||
|
# status_update_rate: 'auto'
|
||||||
|
# api_open: null
|
||||||
|
max_size: 10
|
||||||
|
# default_concurrency_limit:
|
||||||
|
|
||||||
|
layout:
|
||||||
|
show_settings: false
|
||||||
|
header: /app/src/misc/header.html
|
||||||
|
header_format_options:
|
||||||
|
header_logo_url: https://apstrom.ca/
|
||||||
|
header_logo_src: /app/src/misc/logo.png
|
||||||
|
footer: /app/src/misc/footer.html
|
||||||
|
footer_format_options:
|
||||||
|
# footer_css_path: /app/src/misc/footer_style.css
|
||||||
|
footer_scraibe_webui_version: "0.1.1-dev"
|
||||||
|
|
||||||
|
scraibe_params:
|
||||||
|
## LocalAI (transcription + diarization)
|
||||||
|
localai_api_url: http://localhost:8080
|
||||||
|
localai_api_key: ""
|
||||||
|
localai_model: vibevoice-cpp-asr
|
||||||
|
|
||||||
|
## Summarizer LLM (for transcript_and_summarize)
|
||||||
|
summarizer_api_url: http://localhost:8080
|
||||||
|
summarizer_api_key: ""
|
||||||
|
summarizer_model: qwen3-14b
|
||||||
|
|
||||||
|
## Legacy Whisper/Pyannote fields (ignored by LocalAI client; kept for compatibility)
|
||||||
|
whisper_model: large-v3
|
||||||
|
whisper_type: whisper
|
||||||
|
dia_model: null
|
||||||
|
use_auth_token: null
|
||||||
|
device: cpu
|
||||||
|
num_threads: 18
|
||||||
|
|
||||||
|
mail:
|
||||||
|
sender_email: scribe@apstrom.ca
|
||||||
|
smtp_server: mail.apstrom.ca
|
||||||
|
smtp_port: 587
|
||||||
|
sender_password: ""
|
||||||
|
connection_type: TLS # 'SSL', 'TLS', or 'PLAIN'
|
||||||
|
context: default
|
||||||
|
default_subject: "A.P.Strom audio transcription"
|
||||||
|
error_template: /app/src/misc/error_notification_template.html
|
||||||
|
error_subject: "error"
|
||||||
|
error_format_options:
|
||||||
|
## exception is mandatory for your html; will be set to the related exception in the Code
|
||||||
|
contact_email: support@apstrom.ca
|
||||||
|
success_template: /app/src/misc/success_template.html
|
||||||
|
success_subject: "ready"
|
||||||
|
success_format_options:
|
||||||
|
contact_email: info@apstrom.ca
|
||||||
|
upload_notification_template: /app/src/misc/upload_notification_template.html
|
||||||
|
upload_subject: "upload successful"
|
||||||
|
upload_notification_format_options:
|
||||||
|
queue_position: null
|
||||||
|
contact_email: info@apstrom.ca
|
||||||
|
# mail_css_path: /app/src/misc/mail_style.css
|
||||||
|
|
||||||
|
advanced:
|
||||||
|
keep_model_alive: false # for sync interface only; keeps the model alive during a session
|
||||||
|
concurrent_workers_async: 2 # number of concurrent working threads in the async interface
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Error Notification</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{css_path}">
|
||||||
|
<style>
|
||||||
|
body {{
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}}
|
||||||
|
.container {{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
}}
|
||||||
|
h1 {{
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-top: 0;
|
||||||
|
}}
|
||||||
|
p {{
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}}
|
||||||
|
.error-message, .success-message {{
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
}}
|
||||||
|
.error-message {{
|
||||||
|
color: #721c24;
|
||||||
|
}}
|
||||||
|
.success-message {{
|
||||||
|
color: #7C6DA0;
|
||||||
|
}}
|
||||||
|
.contact {{
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
.contact a {{
|
||||||
|
color: #0056b3;
|
||||||
|
text-decoration: none;
|
||||||
|
}}
|
||||||
|
.contact a:hover {{
|
||||||
|
text-decoration: underline;
|
||||||
|
}}
|
||||||
|
.disclaimer {{
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
.signature {{
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1 style="color: #7C6DA0;">Error Notification</h1>
|
||||||
|
<p>Dear user:</p>
|
||||||
|
<p>An error occurred while processing your audio file. This means that something went wrong during the processing of your file, and it could not be completed successfully.</p>
|
||||||
|
<p class="error-message">Error details: {exception}</p>
|
||||||
|
<p>Please check the file and try again. If the problem persists, our support team is here to help.</p>
|
||||||
|
<div class="contact">
|
||||||
|
<p>You can contact our support team at <a href="mailto:{contact_email}">{contact_email}</a>. They are available to assist with any questions or issues you may have.</p>
|
||||||
|
</div>
|
||||||
|
<div class="disclaimer">
|
||||||
|
<p>Please note that our support team does not have the ability to fix processing errors directly or access the files you have uploaded. They can provide guidance and help troubleshoot any issues you may encounter.</p>
|
||||||
|
</div>
|
||||||
|
<div class="signature">
|
||||||
|
<p>Thank you for using our transcription service!</p>
|
||||||
|
<p>A.P.Strom</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Footer</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Styles from footer_style.css */
|
||||||
|
|
||||||
|
/* Resetting margins and paddings */
|
||||||
|
html, body {{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}}
|
||||||
|
body {{
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between; /* Ensures footer stays at the bottom */
|
||||||
|
}}
|
||||||
|
.footer {{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
/* Removed background-color to inherit from parent */
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
width: 100%; /* Ensure footer is full width */
|
||||||
|
box-sizing: border-box; /* Padding is included in the width */
|
||||||
|
}}
|
||||||
|
.footer > div:first-child {{
|
||||||
|
margin-left: -20px;
|
||||||
|
padding-left: 0; /* Adjust if necessary */
|
||||||
|
}}
|
||||||
|
.footer div, .footer a {{
|
||||||
|
margin: 0 5px;
|
||||||
|
}}
|
||||||
|
.footer div {{
|
||||||
|
text-align: left;
|
||||||
|
}}
|
||||||
|
.footer a {{
|
||||||
|
color: #333;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}}
|
||||||
|
.footer a:hover {{
|
||||||
|
color: #50AF31;
|
||||||
|
}}
|
||||||
|
.foot-text {{
|
||||||
|
text-align: center;
|
||||||
|
width: 80%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
.github-section {{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}}
|
||||||
|
.github-icon a {{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: transparent; /* Ensure transparency */
|
||||||
|
text-decoration: none !important;
|
||||||
|
color: white;
|
||||||
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||||
|
}}
|
||||||
|
.github-icon i {{
|
||||||
|
font-size: 24px;
|
||||||
|
}}
|
||||||
|
.github-icon a:hover, .github-icon a:focus {{
|
||||||
|
background-color: #50AF31;
|
||||||
|
transform: scale(1.1);
|
||||||
|
text-decoration: none;
|
||||||
|
}}
|
||||||
|
.github-icon a, .github-icon a:hover, .github-icon a:active, .github-icon a:visited {{
|
||||||
|
text-decoration: none;
|
||||||
|
}}
|
||||||
|
.build-version {{
|
||||||
|
margin-top: 8px;
|
||||||
|
color: white; /* Adjust as needed */
|
||||||
|
font-size: 12px;
|
||||||
|
}}
|
||||||
|
/* Removed dark mode media query to let Gradio handle theming */
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<div class="foot-text">
|
||||||
|
<h2 style="font-weight: bold; color: #7C6DA0;">Disclaimer</h2>
|
||||||
|
<p>The transcription completed by this application may contain errors.</p>
|
||||||
|
<p>Users must take care to review transcripts before circulating to ensure that they are error-free and complete.</p>
|
||||||
|
<p>The transcripts produced by this application do not replace a court reporter's transcription. The transcripts completed by this application are for the user's convenience only.</p>
|
||||||
|
<h2 style="font-weight: bold; color: #7C6DA0;">Data retention</h2>
|
||||||
|
<p>Audio or video files uploaded to this application are only retained for the time that it takes to complete the transcription. All transcripts are deleted after they are transmitted to the user.</p>
|
||||||
|
</div>
|
||||||
|
<div class="github-section">
|
||||||
|
<div class="github-icon">
|
||||||
|
<a href="https://github.com/JSchmie/ScrAIbe-WebUI" aria-label="GitHub">
|
||||||
|
<i class="fab fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="build-version">Build-Version: {footer_scraibe_webui_version}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
/* footer_style.css */
|
||||||
|
|
||||||
|
/* Resetting margins and paddings */
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between; /* Ensures footer stays at the bottom */
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px; /* Adjusted for demonstration */
|
||||||
|
background-color: #F9FAFB; /* Fixed background color */
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
width: 100%; /* Ensure footer is full width */
|
||||||
|
box-sizing: border-box; /* Padding is included in the width */
|
||||||
|
}
|
||||||
|
.footer > div:first-child {
|
||||||
|
margin-left: -20px;
|
||||||
|
padding-left: 0; /* Reducing or eliminating left padding if it's causing the shift */
|
||||||
|
}
|
||||||
|
.footer div, .footer a {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
.footer div {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.footer a {
|
||||||
|
color: #333;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
.footer a:hover {
|
||||||
|
color: #50AF31;
|
||||||
|
}
|
||||||
|
.github-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.github-icon a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: none;
|
||||||
|
text-decoration: none !important; /* Removes underline */
|
||||||
|
color: white;
|
||||||
|
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||||
|
}
|
||||||
|
.github-icon i {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.github-icon a:hover, .github-icon a:focus {
|
||||||
|
background-color: #50AF31;
|
||||||
|
transform: scale(1.1);
|
||||||
|
text-decoration: none; /* Removes underline */
|
||||||
|
}
|
||||||
|
.github-icon a, .github-icon a:hover, .github-icon a:active, .github-icon a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.build-version {
|
||||||
|
margin-top: 8px; /* Adjust spacing between the icon and the text as needed */
|
||||||
|
color: white; /* Adjust text color as needed */
|
||||||
|
font-size: 12px; /* Adjust font size as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode styles */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
background-color: #121212;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
background-color: transparent; /* Make footer background transparent */
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.footer a {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.footer a:hover {
|
||||||
|
color: #50AF31;
|
||||||
|
}
|
||||||
|
.build-version {
|
||||||
|
color: #CCCCCC; /* Adjust text color for better contrast in dark mode */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>A.P.Strom Transcription</title>
|
||||||
|
|
||||||
|
<!-- Importing Cormorant Garamond font from Google Fonts -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.header-container {{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 30px;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.logo-container {{
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 20px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 300px;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.logo {{
|
||||||
|
width: 35%;
|
||||||
|
height: auto;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.header-title {{
|
||||||
|
font-family: 'Cormorant Garamond', serif;
|
||||||
|
font-size: 50px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #7C6DA0;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.header-title::before, .header-title::after {{
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
height: 2px;
|
||||||
|
width: 80%;
|
||||||
|
background-color: #7C6DA0;
|
||||||
|
left: 10%;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.header-title::before {{
|
||||||
|
top: 0.5em;
|
||||||
|
}}
|
||||||
|
|
||||||
|
.header-title::after {{
|
||||||
|
bottom: 0.5em;
|
||||||
|
}}
|
||||||
|
|
||||||
|
p, h2 {{
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 10px 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header-container">
|
||||||
|
<h1 class="header-title">A.P.Strom Transcription</h1>
|
||||||
|
<div class="logo-container">
|
||||||
|
<a href="{header_logo_url}">
|
||||||
|
<img src="./gradio_api/file={header_logo_src}" alt="A.P.Strom Logo" class="logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center; padding: 20px 10%;">
|
||||||
|
<p>
|
||||||
|
Upload, record, or provide a video with audio for transcription. Our toolkit is designed to transcribe content from multiple languages accurately. The integrated speaker diarisation feature identifies different speakers, ensuring a smooth transcription experience. For optimal results, indicate the number of speakers and the original language of the content.
|
||||||
|
</p>
|
||||||
|
<h2 style="font-weight: bold; color: #7C6DA0;">Start your transcription below.</h2>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
/* header_style.css */
|
||||||
|
|
||||||
|
/* Importing Cormorant Garamond font from Google Fonts */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap');
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 20px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Cormorant Garamond', serif;
|
||||||
|
font-size: 50px !important; /* Increased font size */
|
||||||
|
font-weight: bold;
|
||||||
|
color: #50AF31;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1::before, h1::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
height: 2px;
|
||||||
|
width: 80%;
|
||||||
|
background-color: #50AF31;
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1::before {
|
||||||
|
top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1::after {
|
||||||
|
bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, h2 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 10px 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
@@ -0,0 +1,57 @@
|
|||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.error-message, .success-message {
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
.error-message {
|
||||||
|
color: #721c24;
|
||||||
|
}
|
||||||
|
.success-message {
|
||||||
|
color: #155724;
|
||||||
|
}
|
||||||
|
.contact {
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.contact a {
|
||||||
|
color: #0056b3;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.contact a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.disclaimer {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.signature {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Transcript Ready</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="{css_path}">
|
||||||
|
<style>
|
||||||
|
body {{
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}}
|
||||||
|
.container {{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
}}
|
||||||
|
h1 {{
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-top: 0;
|
||||||
|
}}
|
||||||
|
p {{
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}}
|
||||||
|
.error-message, .success-message {{
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
}}
|
||||||
|
.error-message {{
|
||||||
|
color: #721c24;
|
||||||
|
}}
|
||||||
|
.success-message {{
|
||||||
|
color: #7C6DA0;
|
||||||
|
}}
|
||||||
|
.contact {{
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
.contact a {{
|
||||||
|
color: #0056b3;
|
||||||
|
text-decoration: none;
|
||||||
|
}}
|
||||||
|
.contact a:hover {{
|
||||||
|
text-decoration: underline;
|
||||||
|
}}
|
||||||
|
.disclaimer {{
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
.signature {{
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1 style="color: #7C6DA0;">Transcript Ready</h1>
|
||||||
|
<p>Dear user:</p>
|
||||||
|
<p>Your file has been successfully processed, and the transcript is now ready. The transcript of your audio or video file is attached to this email.</p>
|
||||||
|
<p>We hope you find the transcript useful. If you have any questions or need further assistance, please do not hesitate to contact our support team.</p>
|
||||||
|
<div class="contact">
|
||||||
|
<p>You can reach our support team at <a href="mailto:{contact_email}">{contact_email}</a>. They are available to help with any questions or issues you may have.</p>
|
||||||
|
</div>
|
||||||
|
<div class="disclaimer">
|
||||||
|
<p>Please note that our support team cannot modify the content of the transcript. They can assist with any other questions or concerns you may have.</p>
|
||||||
|
</div>
|
||||||
|
<div class="signature">
|
||||||
|
<p>Thank you for using our transcription service!</p>
|
||||||
|
<p>A.P.Strom</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Upload Successful</title>
|
||||||
|
<style>
|
||||||
|
body {{
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}}
|
||||||
|
.container {{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
}}
|
||||||
|
h1 {{
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-top: 0;
|
||||||
|
}}
|
||||||
|
p {{
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 1em;
|
||||||
|
}}
|
||||||
|
.error-message, .success-message {{
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
}}
|
||||||
|
.error-message {{
|
||||||
|
color: #721c24;
|
||||||
|
}}
|
||||||
|
.success-message {{
|
||||||
|
color: #7C6DA0;
|
||||||
|
}}
|
||||||
|
.contact {{
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
.contact a {{
|
||||||
|
color: #0056b3;
|
||||||
|
text-decoration: none;
|
||||||
|
}}
|
||||||
|
.contact a:hover {{
|
||||||
|
text-decoration: underline;
|
||||||
|
}}
|
||||||
|
.disclaimer {{
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
.signature {{
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
|
}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1 style="color: #7C6DA0;">Upload Successful</h1>
|
||||||
|
<p>Dear user:</p>
|
||||||
|
<p>Your file has been successfully uploaded and is now in our processing queue. This means that our system has received your file, and it is waiting to be processed. We will handle your file as soon as possible.</p>
|
||||||
|
<p class="success-message">Your current position in the queue is: {queue_position}. This is the order in which your file will be processed. We appreciate your patience as we work through the queue.</p>
|
||||||
|
<p>We will notify you once your file has been processed. If you have any urgent needs or further questions, feel free to reach out to our support team.</p>
|
||||||
|
<div class="contact">
|
||||||
|
<p>You can contact our support team at <a href="mailto:{contact_email}">{contact_email}</a>. Please note that our support team is here to help with any questions or issues you might have.</p>
|
||||||
|
</div>
|
||||||
|
<div class="disclaimer">
|
||||||
|
<p>Please note that our support team does not have the ability to change your position in the queue or access the files you have uploaded. They are here to provide assistance and answer any questions you might have about the process.</p>
|
||||||
|
</div>
|
||||||
|
<div class="signature">
|
||||||
|
<p>Thank you for using our transcription service!</p>
|
||||||
|
<p>A.P.Strom</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user