generated from ricardo/MVCLogin
273 lines
9.7 KiB
Plaintext
273 lines
9.7 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Extrair Resumo";
|
|
}
|
|
|
|
@section Styles {
|
|
<style type="text/css">
|
|
.extract-container {
|
|
max-width: 800px;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
.extract-card {
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
|
padding: 2rem;
|
|
}
|
|
|
|
.form-control-lg {
|
|
font-size: 1.1rem;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 30px 0 0 30px;
|
|
}
|
|
|
|
.btn-extract {
|
|
border-radius: 0 30px 30px 0;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
.feature-icon {
|
|
background-color: var(--suma-beige);
|
|
border-radius: 50%;
|
|
width: 70px;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1rem auto;
|
|
}
|
|
|
|
.feature-icon i {
|
|
font-size: 2rem;
|
|
color: var(--suma-red);
|
|
}
|
|
|
|
.step-number {
|
|
background-color: var(--suma-red);
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.progress-container {
|
|
display: none;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.progress {
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<div class="container extract-container">
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 mb-3">Resumir Vídeo do YouTube</h1>
|
|
<p class="lead">Cole o link de qualquer vídeo do YouTube para obter um resumo inteligente</p>
|
|
</div>
|
|
|
|
<div class="extract-card mb-5">
|
|
<form id="extractForm">
|
|
<div class="form-group">
|
|
<label for="youtubeUrl"><strong>URL do vídeo</strong></label>
|
|
<div class="input-group input-group-lg">
|
|
<input type="url" class="form-control form-control-lg" id="youtubeUrl" placeholder="https://www.youtube.com/watch?v=..." required>
|
|
<div class="input-group-append">
|
|
<button type="submit" class="btn btn-primary btn-lg btn-extract" id="extractButton">
|
|
<i class="bi bi-magic mr-2"></i> Resumir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<small class="form-text text-muted">Ex: https://www.youtube.com/watch?v=abcde12345</small>
|
|
</div>
|
|
|
|
<div class="progress-container" id="progressContainer">
|
|
<p class="text-center mb-2" id="processingStatus">Processando vídeo...</p>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Como funciona -->
|
|
<div class="mb-5">
|
|
<h3 class="text-center mb-4">Como funciona</h3>
|
|
<div class="row">
|
|
<!-- Passo 1 -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-link-45deg"></i>
|
|
</div>
|
|
<h5 class="text-center mb-3">Passo 1</h5>
|
|
<div class="d-flex align-items-start">
|
|
<div class="step-number">1</div>
|
|
<div>
|
|
Cole o link do vídeo do YouTube que deseja resumir no campo acima.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passo 2 -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-cpu"></i>
|
|
</div>
|
|
<h5 class="text-center mb-3">Passo 2</h5>
|
|
<div class="d-flex align-items-start">
|
|
<div class="step-number">2</div>
|
|
<div>
|
|
Nossa IA extrai as legendas e processa o conteúdo do vídeo automaticamente.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passo 3 -->
|
|
<div class="col-md-4 mb-4">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-file-earmark-text"></i>
|
|
</div>
|
|
<h5 class="text-center mb-3">Passo 3</h5>
|
|
<div class="d-flex align-items-start">
|
|
<div class="step-number">3</div>
|
|
<div>
|
|
Receba um resumo completo com os principais pontos, timestamps e transcrição.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recursos -->
|
|
<div class="row">
|
|
<div class="col-12 text-center mb-4">
|
|
<h3>Recursos incríveis do SumaTube</h3>
|
|
</div>
|
|
|
|
<!-- Recurso 1 -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="summary-section d-flex">
|
|
<div class="mr-4">
|
|
<i class="bi bi-clock" style="font-size: 2rem; color: var(--suma-red);"></i>
|
|
</div>
|
|
<div>
|
|
<h5>Economize tempo</h5>
|
|
<p>Extraia o conteúdo mais importante de vídeos longos em questão de minutos.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recurso 2 -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="summary-section d-flex">
|
|
<div class="mr-4">
|
|
<i class="bi bi-translate" style="font-size: 2rem; color: var(--suma-red);"></i>
|
|
</div>
|
|
<div>
|
|
<h5>Suporte a múltiplos idiomas</h5>
|
|
<p>Resumos disponíveis em português, inglês, espanhol e outros idiomas.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recurso 3 -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="summary-section d-flex">
|
|
<div class="mr-4">
|
|
<i class="bi bi-lightning-charge" style="font-size: 2rem; color: var(--suma-red);"></i>
|
|
</div>
|
|
<div>
|
|
<h5>Processamento rápido</h5>
|
|
<p>Nossa tecnologia avançada processa os vídeos em segundos.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recurso 4 -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="summary-section d-flex">
|
|
<div class="mr-4">
|
|
<i class="bi bi-download" style="font-size: 2rem; color: var(--suma-red);"></i>
|
|
</div>
|
|
<div>
|
|
<h5>Download de resumos</h5>
|
|
<p>Salve os resumos em PDF para referência futura e compartilhamento.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$('#extractForm').submit(function(e) {
|
|
e.preventDefault();
|
|
|
|
// Validar URL
|
|
var youtubeUrl = $('#youtubeUrl').val();
|
|
if (!isValidYouTubeUrl(youtubeUrl)) {
|
|
alert('Por favor, insira uma URL válida do YouTube.');
|
|
return;
|
|
}
|
|
|
|
// Mostrar progresso
|
|
$('#extractButton').prop('disabled', true);
|
|
$('#progressContainer').show();
|
|
simulateProgress();
|
|
|
|
// Simulação de processamento - em um projeto real, aqui você faria a chamada AJAX para sua WebAPI
|
|
setTimeout(function() {
|
|
// Redirecionar para a página de resultado (em um caso real, você redirecionaria após receber a resposta da API)
|
|
window.location.href = '/Video/Summary?id=' + extractVideoId(youtubeUrl);
|
|
}, 5000);
|
|
});
|
|
|
|
function isValidYouTubeUrl(url) {
|
|
var regex = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+/;
|
|
return regex.test(url);
|
|
}
|
|
|
|
function extractVideoId(url) {
|
|
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
|
var match = url.match(regExp);
|
|
return (match && match[7].length == 11) ? match[7] : false;
|
|
}
|
|
|
|
function simulateProgress() {
|
|
var progress = 0;
|
|
var interval = setInterval(function() {
|
|
progress += 5;
|
|
$('#progressBar').css('width', progress + '%');
|
|
$('#progressBar').attr('aria-valuenow', progress);
|
|
|
|
// Atualizar mensagem de status
|
|
if (progress <= 20) {
|
|
$('#processingStatus').text('Extraindo informações do vídeo...');
|
|
} else if (progress <= 40) {
|
|
$('#processingStatus').text('Processando legendas...');
|
|
} else if (progress <= 60) {
|
|
$('#processingStatus').text('Identificando pontos principais...');
|
|
} else if (progress <= 80) {
|
|
$('#processingStatus').text('Gerando resumo...');
|
|
} else {
|
|
$('#processingStatus').text('Finalizando...');
|
|
}
|
|
|
|
if (progress >= 100) {
|
|
clearInterval(interval);
|
|
}
|
|
}, 200);
|
|
}
|
|
});
|
|
</script>
|
|
} |