Support Video Proxy and TED Embedding

[taowang1993]

Summary

This PR adds two features to the DuckDuckGo Video Search tool.

Feature 1: Video Proxy

Users can input a video proxy url.

This feature will prepend the proxy url to the video url.

For example: https://proxy.com/https://youtube.com

2. TED Video Embedding: This feature will be fully supported once Dify supports iframe in the future.

Screenshots

[crazywoola]

@hjlarry Can you review this as well?

[hjlarry]

Hi @taowang1993 I tried many times with different model and prompt, but I can't make the video display as expected.

This is my screenshot and log:

2024-11-18 17:11:15,596.596 INFO [Thread-382 (process_request_thread)] [_internal.py:97] - 127.0.0.1 - - [19/Nov/2024 09:11:15] "POST /console/api/apps/17b081f2-8b82-4844-81fa-b6168250f485/chat-messages HTTP/1.1" 200 -

[on_tool_start] ToolCall:ddgo_video
{'query': 'TED'}
2024-11-18 17:11:16,099.099 INFO [Thread-383 (_generate_worker)] [lib.rs:369] - response: https://duckduckgo.com/?q=TED 200 19031
2024-11-18 17:11:16,295.295 INFO [ThreadPoolExecutor-3_0] [lib.rs:369] - response: https://duckduckgo.com/v.js?l=wt-wt&o=json&q=TED&vqd=4-286567987311800188340080993752210954951&f=%2C%2C%2C&p=-1&s=0 200 75507

[on_tool_end]
Tool: ddgo_video
Inputs: {'query': 'TED', 'max_results': 1, 'timelimit': '', 'duration': '', 'proxy_url': ''}
Outputs: 

ted | Official Trailer | Peacock Original


<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 8px;">
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        src="https://www.youtube.com/embed/aq2Vt7OvQG0?autoplay=1"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

---

tool response: {"content": "https://www.youtube.com/watch?v=aq2Vt7OvQG0", "description": "ted is streaming January 11th on Peacock: https://pck.tv/3u5fOJt Synopsis: In this comedic prequel event series to the Ted films, it's 1993, and Ted the bear's (Seth MacFarlane) moment of fame has passed. He's now living back home in Framingham, Massachusetts with his best friend, 16-year-old John Bennett (Max Burkholder), along with John ...", "duration": "2:15", "embed_html": "<iframe width=\"1280\" height=\"720\" src=\"https://www.youtube.com/embed/aq2Vt7OvQG0?autoplay=1\" frameborder=\"0\" allowf


[on_llm_before_invoke]
Model: gpt-4o
Parameters:
        Tools:
                ddgo_video
Stream: True
User: 5e5468cf-759b-4df0-8c27-27381aa74d7a
Prompt messages:
        role: user
        content: search a TED video and embed it in an iframe
        role: assistant
        content: 
        name: ddgo_video
        role: tool
        content: 

ted | Official Trailer | Peacock Original


<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 8px;">
    <iframe
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        src="https://www.youtube.com/embed/aq2Vt7OvQG0?autoplay=1"
        frameborder="0"
        allowfullscreen>
    </iframe>
</div>

---

tool response: {"content": "https://www.youtube.com/watch?v=aq2Vt7OvQG0", "description": "ted is streaming January 11th on Peacock: https://pck.tv/3u5fOJt Synopsis: In this comedic prequel event series to the Ted films, it's 1993, and Ted the bear's (Seth MacFarlane) moment of fame has passed. He's no
w living back home in Framingham, Massachusetts with his best friend, 16-year-old John Bennett (Max Burkholder), along with John ...", "duration": "2:15", "embed_html": "<iframe width=\"1280\" height=\"720\" src=\"https://www.youtube.com/embed/aq2Vt7OvQG0?autoplay=1\" frameborder=\"0\" allowfullscreen
></iframe>", "embed_url": "https://www.youtube.com/embed/aq2Vt7OvQG0?autoplay=1", "image_token": "1be7429fcda9dc17eeb35750f239afb0617370bd061509023fff846f812aaccd", "images": {"large": "https://tse2.mm.bing.net/th?id=OVP.mEQIfWX6PeQVVEewfjx5hQHgFo&pid=Api", "medium": "https://tse2.mm.bing.net/th?id=OV
P.mEQIfWX6PeQVVEewfjx5hQHgFo&pid=Api", "motion": "https://tse2.mm.bing.net/th?id=OM.dbYOcGkIdHbslg_1731521387&pid=Api", "small": "https://tse2.mm.bing.net/th?id=OVP.mEQIfWX6PeQVVEewfjx5hQHgFo&pid=Api"}, "provider": "Bing", "published": "2023-11-29T16:30:00.0000000", "publisher": "YouTube", "statistics": {"viewCount": 3127355}, "title": "ted | Official Trailer | Peacock Original", "uploader": "Peacock"}.

[on_llm_new_chunk]2024-11-18 17:11:17,819.819 INFO [Thread-383 (_generate_worker)] [_client.py:1038] - HTTP Request: POST https://api.gpts.vin/v1/chat/completions "HTTP/1.1 200 OK"
Here is a TED video that you can watch:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/aq2Vt7OvQG0?autoplay=1" frameborder="0" allowfullscreen></iframe>

It appears to be a trailer for a comedy series related to "Ted," the movie character. If you are looking for more intellectual TED Talks, please let me know, and I can search specifically for those.
[on_llm_after_invoke]
Content: Here is a TED video that you can watch:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/aq2Vt7OvQG0?autoplay=1" frameborder="0" allowfullscreen></iframe>

It appears to be a trailer for a comedy series related to "Ted," the movie character. If you are looking for more intellectual TED Talks, please let me know, and I can search specifically for those.
Model: gpt-4o-2024-08-06
Usage: prompt_tokens=663 prompt_unit_price=Decimal('5.00') prompt_price_unit=Decimal('0.000001') prompt_price=Decimal('0.0033150') completion_tokens=98 completion_unit_price=Decimal('15.00') completion_price_unit=Decimal('0.000001') completion_price=Decimal('0.0014700') total_tokens=761 total_price=Decimal('0.0047850') currency='USD' latency=2.7046667000104208
System Fingerprint: fp_04751d0b65

[taowang1993]

The video embedding feature will only supported when Dify supports iframe embedding.
In web/app/components/base/markdown.tsx, iframe is currently disallowed:

        disallowedElements={['script', 'iframe', 'head', 'html', 'meta', 'link', 'style', 'body']}

Once Dify allows iframe, this feature will work.

Regarding the duplicates and the URL format explainer, I will fix them in a moment.

[taowang1993]

@hjlarry I just fixed the duplicates and proxy url explainer.

Regarding the ways of presenting the videos , if developers do not want to embed the video, they need to explicitly say it in the system prompt.

For example:

If they want to embed the video, they will have to either:

1. remove "iframe" from markdown.tsx and build their own dify-api image
   or
2. wait for Dify to support iframe in the future

[hjlarry]

LGTM