Upload 4 files

README.md

@@ -1,12 +1,10 @@
 ---
-title: ArabicYoutubeSearch
-emoji: 📊
-colorFrom: pink
-colorTo: red
+title: ArabicYoutube Ask
+emoji: 📈
+colorFrom: gray
+colorTo: blue
 sdk: streamlit
 sdk_version: 1.17.0
 app_file: app.py
 pinned: false
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,166 @@
+import streamlit as st
+import pinecone
+from sentence_transformers import SentenceTransformer
+import logging
+
+PINECONE_KEY = st.secrets["PINECONE_KEY"]  # app.pinecone.io
+INDEX_ID = 'youtube-search'
+
+st.markdown("<link rel='stylesheet' type='text/css' href='akadymatech/ArabicYoutube-ask/raw/main/styles.css'>", unsafe_allow_html=True)
+
+@st.experimental_singleton
+def init_pinecone():
+    pinecone.init(api_key=PINECONE_KEY, environment="us-central1-gcp")
+    return pinecone.Index(INDEX_ID)
+
+@st.experimental_singleton
+def init_retriever():
+    return SentenceTransformer("stsb-xlm-r-multilingual")
+
+def make_query(query, retriever, top_k=8, include_values=False, include_metadata=True, filter=None):
+    xq = retriever.encode([query]).tolist()
+    # print('The question',xq)
+    logging.info(f"Query: {query}")
+    attempt = 0
+    while attempt < 3:
+        print('I am here')
+        try:
+            xc = st.session_state.index.query(
+                xq,
+                top_k=top_k,
+                include_values=include_values,
+                include_metadata=include_metadata,
+                filter=filter
+            )
+            print('Results: ',xc)
+            matches = xc['matches']
+            # print(matches)
+            break
+        except:
+            # force reload
+            pinecone.init(api_key=PINECONE_KEY, environment="us-central1-gcp")
+            st.session_state.index = pinecone.Index(INDEX_ID)
+            attempt += 1
+            matches = []
+    if len(matches) == 0:
+        logging.error(f"Query failed")
+    return matches
+
+st.session_state.index = init_pinecone()
+# print('index.describe_index_stats()',st.session_state.index.describe_index_stats() )
+retriever = init_retriever()
+
+def card(thumbnail: str, title: str, urls: list, contexts: list, starts: list, ends: list):
+    meta = [(e, s, u, c) for e, s, u, c in zip(ends, starts, urls, contexts)]
+    meta.sort(reverse=False)
+    text_content = []
+    current_start = 0
+    current_end = 0
+    for end, start, url, context in meta:
+        # reformat seconds to timestamp
+        time = start / 60
+        mins = f"0{int(time)}"[-2:]
+        secs = f"0{int(round((time - int(mins))*60, 0))}"[-2:]
+        timestamp = f"{mins}:{secs}"
+        if start < current_end and start > current_start:
+            # this means it is a continuation of the previous sentence
+            text_content[-1][0] = text_content[-1][0].split(context[:10])[0]
+            text_content.append([f"[{timestamp}] {context.capitalize()}", url])
+        else:
+            text_content.append(["xxLINEBREAKxx", ""])
+            text_content.append([f"[{timestamp}] {context}", url])
+        current_start = start
+        current_end = end
+    html_text = ""
+    for text, url in text_content:
+        if text == "xxLINEBREAKxx":
+            html_text += "<br>"
+        else:
+            html_text += f"<small><a href={url}>{text.strip()}... </a></small>"
+            print(text)
+    html = f"""
+    <div class="container-fluid">
+        <div class="row align-items-start">
+            <div class="col-md-4 col-sm-4">
+                <div class="position-relative">
+                    <a href={urls[0]}><img src={thumbnail} class="img-fluid" style="width: 192px; height: 106px"></a>
+                </div>
+            </div>
+            <div  class="col-md-8 col-sm-8">
+                <h2>{title}</h2>
+            </div>
+        <div>
+            {html_text}
+    <br><br>
+    """
+    return st.markdown(html, unsafe_allow_html=True)
+
+channel_map = {
+    'Akadyma': 'UCdS-kUpOLFNr2pdtbcncfng',
+    'test': 'UCr8O8l5cCX85Oem1d18EezQ'
+}
+
+st.write("""
+# YouTube ابحث في مقاطع الـ
+""")
+
+st.info("""
+باحثك الشخصي يسمح لك في البحث في مقاطع اليوتوب. الاصدار الحالي تم إضافة قناة أكاديما
+""")
+
+st.markdown("""
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+""", unsafe_allow_html=True)
+
+query = st.text_input("Search!", "")
+
+with st.expander("Advanced Options"):
+    channel_options = st.multiselect(
+        'Channels to Search',
+        ['Akadyma'],
+        ['Akadyma']
+    )
+
+if query != "":
+    channels = [channel_map[name] for name in channel_options]
+    print('channels name',channels)
+    print(f"query: {query}")
+    matches = make_query(
+        query, retriever, top_k=5,
+        filter={
+            'channel_id': {'$nin': channels}
+        }
+    )
+
+    results = {}
+    order = []
+    for context in matches:
+        video_id = context['metadata']['url'].split('/')[-1]
+        if video_id not in results:
+            results[video_id] = {
+                'title': context['metadata']['title'],
+                'urls': [f"{context['metadata']['url']}?t={int(context['metadata']['start'])}"],
+                'contexts': [context['metadata']['text']],
+                'starts': [int(context['metadata']['start'])],
+                'ends': [int(context['metadata']['end'])]
+            }
+            order.append(video_id)
+        else:
+            results[video_id]['urls'].append(
+                f"{context['metadata']['url']}?t={int(context['metadata']['start'])}"
+            )
+            results[video_id]['contexts'].append(
+                context['metadata']['text']
+            )
+            results[video_id]['starts'].append(int(context['metadata']['start']))
+            results[video_id]['ends'].append(int(context['metadata']['end']))
+    # now display cards
+    for video_id in order:
+        card(
+            thumbnail=f"https://img.youtube.com/vi/{video_id}/maxresdefault.jpg",
+            title=results[video_id]['title'],
+            urls=results[video_id]['urls'],
+            contexts=results[video_id]['contexts'],
+            starts=results[video_id]['starts'],
+            ends=results[video_id]['ends']
+        )

requirements.txt

@@ -0,0 +1,4 @@
+transformers
+sentence-transformers
+pinecone-client
+click==8.0

styles.css

@@ -0,0 +1,160 @@
+@import url("https://fonts.googleapis.com/css?family=Arimo:400,700");
+
+section.main[tabindex="0"] {
+    overflow: scroll;
+}
+
+body {
+    height: 100%;
+    width: 100%;
+    background: #e9e9e9;
+    font-family: 'Arimo', Arial, sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    color: #010b26;
+}
+
+* {
+    -webkit-transition: 300ms;
+    transition: 300ms;
+}
+
+.intro {
+    text-align: center;
+}
+
+ul {
+    list-style-type: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+    font-weight: 400;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+a:hover {
+    color: #6ABCEA;
+}
+
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    max-width: 100%;
+    margin-top: 10vh;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+}
+
+.movie-card {
+    background: #ffffff;
+    box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 315px;
+    margin: 2em;
+    border-radius: 10px;
+    display: inline-block;
+}
+
+.movie-header {
+    padding: 0;
+    margin: 0;
+    height: 367px;
+    width: 100%;
+    display: block;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.header-icon-container {
+    position: relative;
+}
+
+.header-icon {
+    width: 100%;
+    height: 367px;
+    line-height: 367px;
+    text-align: center;
+    vertical-align: middle;
+    margin: 0 auto;
+    color: #ffffff;
+    font-size: 54px;
+    text-shadow: 0px 0px 20px #6abcea, 0px 5px 20px #6ABCEA;
+    opacity: .85;
+}
+
+.header-icon:hover {
+    background: rgba(0, 0, 0, 0.15);
+    font-size: 74px;
+    text-shadow: 0px 0px 20px #6abcea, 0px 5px 30px #6ABCEA;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    opacity: 1;
+}
+
+.movie-card:hover {
+    -webkit-transform: scale(1.03);
+    transform: scale(1.03);
+    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
+}
+
+.movie-content {
+    padding: 18px 18px 24px 18px;
+    margin: 0;
+}
+
+.movie-content-header,
+.movie-info {
+    display: table;
+    width: 100%;
+}
+
+.movie-title {
+    font-size: 24px;
+    margin: 0;
+    display: table-cell;
+}
+
+.movie-info {
+    margin-top: 1em;
+}
+
+.info-section {
+    display: table-cell;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+.info-section:first-of-type {
+    text-align: left;
+}
+
+.info-section:last-of-type {
+    text-align: right;
+}
+
+.info-section label {
+    display: block;
+    color: rgba(0, 0, 0, 0.5);
+    margin-bottom: .5em;
+    font-size: 9px;
+}
+
+.info-section span {
+    font-weight: 700;
+    font-size: 11px;
+}