so i have been trying to create a webpage that downloads the media from my telegram account an displays it in the webpage. what i want is it as the images are being downloaded from the server i want them to appear one by one in the webpage. the problem is in my case it displays all the images once all the images are downloaded. so now i’m trying the yeild method to find a workaround.
here is the sample code:
#function.py
async def image_to_html(client):
await client.connect()
async for message in client.iter_messages('me'):
if message.document and message.document.mime_type == 'image/jpeg':
image_data=await receive_file(client=client, msg=message)
file_name=message.document.attributes[-1].file_name
file_size= human_readable_size(message.document.size)
date=message.document.date
template = f'''<div class="box">
<img src="data:image/jpeg;base64,{base64.b64encode(image_data).decode()}" alt="Telegram Image{date}">
<div class="details">
<p1>{file_name}</p1>
<p2>{file_size}</p2>
<i class="input_icon uil uil-import"></i>
</div>
</div>'''
yield template
await client.disconnect()
#website.py
from flask import Flask, request, render_template, redirect, url_for, json
from All_functions import Telegram_Id_Hash, login_otp_first_half, login_otp_second_half, session_status
from All_functions import image_to_html
from telethon.sync import TelegramClient
import json,os
import asyncio
from flask import session, Response, stream_with_context
@app.route('/Gallary_documents_image_render', methods=['post'])
def Gallary_documents_image_render():
data = session.get('data')
api_id, api_hash, number = data['id'], data['hash'], data['number'].replace('+','')
loop = asyncio.new_event_loop()
asyncio.set_event_loop(loop)
client = TelegramClient(number, api_id, api_hash, loop=loop)
def generate():
async def wrapper():
async for html_code in image_to_html(client=client):
yield json.dumps({'html_code': html_code})
gen = wrapper()
while True:
try:
html_code = loop.run_until_complete(gen.__anext__())
yield html_code
except StopAsyncIteration:
break
return Response(stream_with_context(generate()), mimetype='application/json')
#Gallary.html
<!DOCTYPE html>
<html>
<head>
<title>Grid Gallary</title>
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<link rel="stylesheet" type="text/css" href="static/css/Gallary.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.9/css/unicons.css">
</head>
<body>
<div class="frame">
<p class="frame__prev" >TELE-STORAGE</p>
<a class="frame__back" href="/Gallary_photos" >Photos</a>
<a class="frame__back" href="/Gallary_videos" >Videos</a>
<a class="frame__back" href="/Gallary_documents" >Documents</a>
<a class="frame__back" href="/Gallary_allfiles" >All Files</a>
<a class="frame__back" href="/settings" >Settings</a>
</div>
<div class="container" id="container">
<!-- Images will be populated here -->
</div>
<script src="static/js/photos/gallary.js"></script>
</body>
</html>
#gallary.js
window.onload = function() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/Gallary_documents_image_render", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 3 && xhr.status === 200) {
var response = xhr.responseText;
document.getElementById("container").innerHTML += response.html_code;
}
};
xhr.send();
};
do let me know if anything else is needed.
i’m expecting a work around for this streaming display in flask. please let me know if there is a way to do it .