def gen_frames():
    cnt = 1
    while True:
        #Get streamed image and streamed telemetry (text)
        img_stream = data_stream['img']
        telemetry = data_stream['telemetry']

        if cnt%2 == 0:
            yield (b'--framern'
               b'Content-Type: image/jpegrnrn' + img_stream.getvalue() + b'rn')
        else:
            yield telemetry+ 'n'
        cnt += 1

gen = gen_frames()
@app.route('/data_feed')
def data_feed():
    #get length of the data yield by generator
    length_data = len(next(gen))
    try:
        if length_data > 1000:
            #data yield is an image
            return Response(gen_img, mimetype='multipart/x-mixed-replace; boundary=frame')
        else:
            #data yield is text (telemetry)
            return Response(gen_img, mimetype='text/plain')
    except:
        print('No response was returned')

<!-- Show images -->
 <img src="{{ url_for('video_feed') }}" id="vid">

<!-- Show text -->
<p>Telemetry: <span id="telemetry"></span></p>
<script>
    var telemetry = document.getElementById('telemetry');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '{{ url_for('video_feed') }}');
    xhr.send();
    var position = 0;
    function handleNewData() {
        var msg = xhr.responseText.split('n');
        msg.slice(position, -1).forEach(function(value) {
              telemetry.textContent = value;  // update the latest value in place
        });
        position = msg.length - 1;
    }

    var timer;
    timer = setInterval(function() { handleNewData(); }, 100);
</script>