elite-transcript-ai / deployment.html
Escapingmatrixtoday's picture
---
5e485c9 verified
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deployment Instructions | Elite Transcript AI</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
500: '#00f0ff',
},
secondary: {
500: '#7b2dff',
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style>
#vanta-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.15;
}
.glow-text {
text-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
}
.glow-box {
box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<div id="vanta-bg"></div>
<main class="container mx-auto px-4 py-12 max-w-4xl">
<div class="flex items-center justify-between mb-8">
<a href="/" class="text-primary-500 hover:text-primary-400 flex items-center gap-2">
<i data-feather="arrow-left"></i> Back to App
</a>
<h1 class="text-4xl font-bold glow-text flex items-center gap-3">
<i data-feather="cloud"></i> Deployment
</h1>
</div>
<div class="bg-gray-800/70 backdrop-blur-sm rounded-xl p-6 glow-box border border-gray-700">
<h2 class="text-2xl font-bold mb-6 text-primary-500 flex items-center gap-2">
<i data-feather="cpu"></i> Frontend Deployment (Vercel)
</h2>
<div class="space-y-4">
<div class="bg-gray-700/30 rounded-lg p-4">
<h3 class="font-medium mb-2 text-secondary-500">Build Command:</h3>
<code class="bg-gray-900 p-2 rounded block font-mono">npm run build</code>
</div>
<div class="bg-gray-700/30 rounded-lg p-4">
<h3 class="font-medium mb-2 text-secondary-500">Output Directory:</h3>
<code class="bg-gray-900 p-2 rounded block font-mono">/client/dist</code>
</div>
<div class="bg-gray-700/30 rounded-lg p-4">
<h3 class="font-medium mb-2 text-secondary-500">Required Environment Variable:</h3>
<code class="bg-gray-900 p-2 rounded block font-mono">VITE_API_BASE_URL=https://yourbackend.render.com</code>
</div>
</div>
</div>
<div class="bg-gray-800/70 backdrop-blur-sm rounded-xl p-6 glow-box border border-gray-700 mt-8">
<h2 class="text-2xl font-bold mb-6 text-primary-500 flex items-center gap-2">
<i data-feather="server"></i> Backend Deployment (Render/AWS)
</h2>
<div class="space-y-4">
<div class="bg-gray-700/30 rounded-lg p-4">
<h3 class="font-medium mb-2 text-secondary-500">Start Command:</h3>
<code class="bg-gray-900 p-2 rounded block font-mono">uvicorn main:app --host 0.0.0.0 --port 8080</code>
</div>
<div class="bg-gray-700/30 rounded-lg p-4">
<h3 class="font-medium mb-2 text-secondary-500">GPU Requirements:</h3>
<ul class="list-disc pl-5 space-y-1">
<li>NVIDIA GPU with CUDA support</li>
<li>Minimum 8GB VRAM (16GB recommended for batch processing)</li>
<li>CUDA 11.8 or higher</li>
</ul>
</div>
<div class="bg-gray-700/30 rounded-lg p-4">
<h3 class="font-medium mb-2 text-secondary-500">Recommended Instance Types:</h3>
<ul class="list-disc pl-5 space-y-1">
<li>AWS: g4dn.xlarge or larger</li>
<li>Render: GPU instances with at least 8GB VRAM</li>
</ul>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-400">
<p>Need help? Contact support@elitetranscript.ai</p>
</div>
</main>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x111827,
points: 10.00,
maxDistance: 20.00,
spacing: 15.00
});
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html>