create.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EFC</title>
<link rel="stylesheet" href="/css/create.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script>
function scrapeData() {
const url = document.getElementById('urlInput').value;
const htmlCheckbox = document.getElementById('htmlCheckbox').checked;
const cssCheckbox = document.getElementById('cssCheckbox').checked;
const javascriptCheckbox = document.getElementById('javascriptCheckbox').checked;
const responsiveCheckbox = document.getElementById('responsiveCheckbox').checked;
const generateHashtags = document.getElementById('hashtagCheckbox').checked;
fetch('/scrape', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ url, htmlCheckbox, cssCheckbox, javascriptCheckbox, responsiveCheckbox, generateHashtags })
})
.then(response => response.json())
.then(data => {
console.log('Received data:', data);
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = ''; // Clear previous results
if (data.image) {
const imgElement = document.createElement('img');
imgElement.id = 'resultImage';
imgElement.src = `data:image/jpeg;base64,${data.image}`;
imgElement.style.maxWidth = '100%';
resultDiv.appendChild(imgElement);
document.getElementById('image-download-buttons').style.display = 'block';
if (data.hashtags.length > 0) {
const hashtagDiv = document.createElement('div');
hashtagDiv.id = 'hashtags';
hashtagDiv.innerHTML = data.hashtags.map(hashtag => `<span class="hashtag">${hashtag}</span>`).join('');
resultDiv.appendChild(hashtagDiv);
}
} else if (data.video) {
const videoElement = document.createElement('video');
videoElement.id = 'resultVideo';
console.log(data.video)
videoElement.src = `data:video/mp4;base64,${data.video}`;
videoElement.width = '100%';
videoElement.controls = true;
resultDiv.appendChild(videoElement);
document.getElementById('video-download-buttons').style.display = 'block';
if (data.hashtags.length > 0) {
const hashtagDiv = document.createElement('div');
hashtagDiv.id = 'hashtags';
hashtagDiv.innerHTML = data.hashtags.map(hashtag => `<span class="hashtag">${hashtag}</span>`).join('');
resultDiv.appendChild(hashtagDiv);
}
} else {
alert('Error: ' + data.error);
}
})
.catch(error => { console.error('Error:', error); });
}
function downloadImage(buttonId) {
const img = document.getElementById('resultImage');
const link = document.createElement('a');
link.href = img.src;
link.download = `${buttonId}.jpg`;
link.click();
}
function downloadVideo(buttonId) {
const video = document.getElementById('resultVideo');
const link = document.createElement('a');
link.href = video.src;
link.download = `${buttonId}.mp4`;
link.click();
}
function selectSingleCheckbox(checkbox) {
const checkboxes = document.getElementsByClassName('single-checkbox');
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
checkbox.checked = true;
}
</script>
</head>
<body>
<div class="big-wrapper light">
<img src="" alt="" class="shape" />
{{> navbar}}
<div class="container2">
<div class="url-input-container">
<input type="url" id="urlInput" placeholder="Enter URL...">
<button class="btn-create" onclick="scrapeData()">Create</button>
</div>
<div class="checkbox-container">
<label><input type="checkbox" class="single-checkbox" id="htmlCheckbox" onclick="selectSingleCheckbox(this)">Web Scraped</label>
<label><input type="checkbox" class="single-checkbox" id="cssCheckbox" onclick="selectSingleCheckbox(this)">Generated Img</label>
<label><input type="checkbox" class="single-checkbox" id="javascriptCheckbox" onclick="selectSingleCheckbox(this)">Random Img</label>
<label><input type="checkbox" class="single-checkbox" id="responsiveCheckbox" onclick="selectSingleCheckbox(this)">Text Animated</label>
</div>
<label><input type="checkbox" id="hashtagCheckbox">Want to generate hashtags?</label>
</div>
<div class="result-container">
<div id="result"></div>
<div id="image-download-buttons" style="display: none;">
<button class="btn-download" onclick="downloadImage('image1')">Download for <i class="fa-brands fa-facebook" style="color: #eceeee;"></i></button>
<button class="btn-download" onclick="downloadImage('image1')">Download for <i class="fa-brands fa-twitter" style="color: #eceeee;"></i></button>
<button class="btn-download" onclick="downloadImage('image1')">Download for <i class="fa-brands fa-instagram" style="color: #eceeee;"></i></button>
</div>
<div id="video-download-buttons" style="display: none;">
<button class="btn-download" onclick="downloadVideo('video1')">Download for <i class="fa-brands fa-facebook" style="color: #eceeee;"></i></button>
<button class="btn-download" onclick="downloadVideo('video1')">Download for <i class="fa-brands fa-twitter" style="color: #eceeee;"></i></button>
<button class="btn-download" onclick="downloadVideo('video1')">Download for <i class="fa-brands fa-instagram" style="color: #eceeee;"></i></button>
</div>
</div>
<footer>
<p>EFC @ 2024 || All Rights Reserved.</p>
</footer>
</main>
<script src="/js/fyp.js"></script>
</body>
</html>
server side app.js
app.post('/scrape', (req, res) => {
const { url, htmlCheckbox, cssCheckbox, javascriptCheckbox, responsiveCheckbox, generateHashtags } = req.body;
let pythonScriptPath;
if (htmlCheckbox) {
pythonScriptPath = path.join(__dirname, 'scraper.py');
} else if (cssCheckbox) {
pythonScriptPath = path.join(__dirname, 'css_scraper.py');
} else if (javascriptCheckbox) {
pythonScriptPath = path.join(__dirname, 'js_scraper.py');
} else if (responsiveCheckbox) {
pythonScriptPath = path.join(__dirname, 'responsive_scraper.py');
} else {
pythonScriptPath = path.join(__dirname, 'default_scraper.py');
}
const pythonProcess = spawn('python', [pythonScriptPath, url]);
let responseData = [];
let hashtags = [];
pythonProcess.stdout.on('data', (data) => {
responseData.push(data);
// console.log(data);
});
pythonProcess.stderr.on('data', (data) => {
console.error(`Error from Python: ${data}`);
});
pythonProcess.on('close', (code) => {
if (code !== 0) {
return res.status(500).json({ error: 'An error occurred while scraping the webpage.' });
}
const buffer = Buffer.concat(responseData);
const base64Data = buffer.toString('base64');
console.log('Base64 Data Length:', base64Data.length); // Debug log
if (generateHashtags) {
const hashtagProcess = spawn('python', [path.join(__dirname, 'hashtag_generator.py'), url]);
hashtagProcess.stdout.on('data', (data) => {
hashtags = data.toString().trim().split('n');
});
hashtagProcess.stderr.on('data', (data) => {
console.error(`Error from Hashtag Generator: ${data}`);
});
hashtagProcess.on('close', (code) => {
if (code === 0) {
if (responsiveCheckbox) {
res.json({ video: base64Data, hashtags });
} else {
res.json({ image: base64Data, hashtags });
}
} else {
res.status(500).json({ error: 'An error occurred while generating hashtags.' });
}
});
} else {
if (responsiveCheckbox) {
res.json({ video: base64Data, hashtags: [] });
} else {
console.log("recieved", responsiveCheckbox)
res.json({ image: base64Data, hashtags: [] });
}
}
});
});
responsive_scrapper python file to create video
import os
import sys
import requests
from bs4 import BeautifulSoup
from PIL import Image
from io import BytesIO
import numpy as np
import certifi
from moviepy.editor import ImageClip, TextClip, CompositeVideoClip
from moviepy.config import change_settings
import random
import base64
# Set the path to ImageMagick
change_settings({"IMAGEMAGICK_BINARY": r"C:Program FilesImageMagick-7.1.1-Q16-HDRImagick.exe"})
def fetch_webpage_content(url):
try:
response = requests.get(url, verify=certifi.where())
response.raise_for_status()
return response.content
except requests.RequestException as e:
print(f"Error fetching webpage content: {e}", file=sys.stderr)
sys.exit(1)
def parse_title(content):
soup = BeautifulSoup(content, 'html.parser')
title_element = soup.find('h1')
return title_element.get_text(strip=True) if title_element else "Title not found"
def fetch_image(url):
try:
response = requests.get(url, verify=certifi.where())
response.raise_for_status()
image = Image.open(BytesIO(response.content))
image = image.resize((1080, 1080), Image.Resampling.LANCZOS)
return image
except requests.RequestException as e:
print(f"Error fetching image: {e}", file=sys.stderr)
sys.exit(1)
def get_random_animation():
animations = ['flyin', 'flyout', 'move_up_to_down']
return random.choice(animations)
def create_text_clip(text, duration=10):
text_clip = TextClip(text, fontsize=50, font='Arial-Bold', color='white', size=(1080, 200))
animation = get_random_animation()
if animation == 'flyin':
text_clip = text_clip.set_position(lambda t: ('center', 1080 - int(1080 * t))).fadein(0.5)
elif animation == 'flyout':
text_clip = text_clip.set_position(lambda t: ('center', int(1080 * t))).fadein(0.5)
elif animation == 'move_up_to_down':
text_clip = text_clip.set_position(lambda t: ('center', 200 - int(880 * t))).fadein(0.5)
else:
text_clip = text_clip.set_position(('center', 'bottom'))
text_clip = text_clip.set_start(0).set_end(duration + 1).crossfadeout(1)
return text_clip
def create_video_with_text(image, text, duration=3):
image_np = np.array(image)
image_clip = ImageClip(image_np).set_duration(duration + len(text.split()) * 0.5)
text_clip = create_text_clip(text, duration)
video = CompositeVideoClip([image_clip, text_clip.set_position(('center', 'center')).resize(width=800)])
return video
def main(url):
content = fetch_webpage_content(url)
title_text = parse_title(content)
soup = BeautifulSoup(content, 'html.parser')
image_element = soup.find('img', class_='hover:ds-scale-110 hover:ds-transition-transform hover:ds-duration-500 hover:ds-ease-in-out ds-rounded-t-xl')
image_url = image_element['src'] if image_element and 'src' in image_element.attrs else None
if image_url:
if image_url:
image = fetch_image(image_url)
image = image.convert("RGB")
video = create_video_with_text(image, title_text)
video_file_path = "output.mp4"
video.write_videofile(video_file_path, fps=24, codec='libx264', audio_codec='aac')
# Check the size of the generated video file
video_file_size = os.path.getsize(video_file_path)
print(f"Generated video file size: {video_file_size} bytes")
with open(video_file_path, "rb") as video_file:
video_base64 = base64.b64encode(video_file.read()).decode('utf-8')
mime_type = "video/mp4"
print(f"data:{mime_type};base64,{video_base64}")
else:
print("No image found", file=sys.stderr)
sys.exit(1)
if __name__ == "__main__":
if len(sys.argv) != 2:
print("Usage: python script.py <url>", file=sys.stderr)
sys.exit(1)
url = sys.argv[1]
main(url)
css
video {
max-width: 100%;
height: auto;
border: 2px solid #5bacdf;
}
tried this and video element is been generated
image handling and displayed on client side succesfully i want video to be displayed also on client side but not getting while i checked if video is been gnerated so it was generated and got it in my pc but not getting on erver side
New contributor
HUZAIFA ASIF is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.