reg-BitsAndBytes-2

Sleeping

App Files Files Community

Chris4K commited on Feb 4

Commit

9c50cfe

•

1 Parent(s): 574385c

Update app.py

Browse files

Files changed (1) hide show

app.py +589 -17

app.py CHANGED Viewed

@@ -244,7 +244,7 @@ def get_response(message, history):
 #####
 vs = load_txt()
 vs = get_vectorstore_from_url("https://www.xing.com/profile/Christof_Kaller/web_profiles")
-#vs = get_vectorstore_from_url("https://www.linkedin.com/in/christof-kaller-6b043733/?originalSubdomain=de")
 vs = get_vectorstore_from_url("https://twitter.com/zX14_7")
@@ -308,19 +308,591 @@ for url in links:
 def simple(text:str):
   return text +" hhhmmm "
-app = gr.ChatInterface(
-    fn=get_response,
-    #fn=simple,
-   # inputs=["text"],
-   # outputs="text",
-    title="Chat with Websites",
-    description="Schreibe hier deine Frage rein...",
-    #allow_flagging=False
-    retry_btn=None,
-    undo_btn=None,
-    clear_btn=None,
-    #bubble_full_width=False,
-    #avatar_images=(None, (os.path.join(os.path.abspath(''), "avatar.png"))),
-)
-app.launch(debug=True, share=True)

 #####
 vs = load_txt()
 vs = get_vectorstore_from_url("https://www.xing.com/profile/Christof_Kaller/web_profiles")
+vs = get_vectorstore_from_url("https://www.linkedin.com/in/christof-kaller-6b043733/?originalSubdomain=de")
 vs = get_vectorstore_from_url("https://twitter.com/zX14_7")
 def simple(text:str):
   return text +" hhhmmm "
+import gradio as gr
+# Define your function
+def get_response(text, texty):
+    response = "Nina: I received your message: " + text
+    return response
+# Load the Bootstrap CSS file
+#gr.load_css('https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css')
+# Load the jQuery library
+#gr.load('https://code.jquery.com/jquery-3.5.1.min.js')
+#gr.load_js('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js')
+html_head = """
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Bootstrap CSS -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <!-- jQuery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">alert()</script>
+    <!-- Bootstrap JS -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+    <!-- Your custom CSS file if any
+    <link href="path/to/your/custom.css" rel="stylesheet">
+    -->
+    <!-- Your custom JavaScript file if any
+    <script src="path/to/your/custom.js"></script>
+    -->
+    <!-- Title of your page -->
+    <title>Your Page Title</title>
+</head>
+"""
+js_head = """
+    // Function to dynamically add JavaScript libraries
+    function addJavaScriptLibraries() {
+      // Add jQuery
+      var jqueryScript = document.createElement('script');
+      jqueryScript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js';
+      document.head.appendChild(jqueryScript);
+      // Add Popper.js
+      var popperScript = document.createElement('script');
+      popperScript.src = 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js';
+      document.head.appendChild(popperScript);
+      // Add Bootstrap JS
+      var bootstrapScript = document.createElement('script');
+      bootstrapScript.src = 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js';
+      document.head.appendChild(bootstrapScript);
+    }
+    // Call the function to add JavaScript libraries
+    //addJavaScriptLibraries();
+"""
+# Define HTML for the header
+header_html = """
+<div style=" border-radius: var(--radius-xl); background-color: #2980b9; color: white; padding: 10px; text-align: center; font-family: Arial;">
+    <img    class="navbar-brand float-left invert"  src="https://pbs.twimg.com/profile_images/567461772282429440/55B9Akf0_400x400.png" width="30" height="30" class="d-inline-block align-top" alt="Kaller">
+    <h1 style="color: white;" >Ask Nina - My Personal KI Assistant</h1>
+    <small style="color: white;" class=" ">Du kannst Nina fragen zu mir und meinem Lebenslauf stellen</small>
+</div>
+"""
+# Define HTML for the left column
+left_column_html = """
+     <!-- Bootstrap CSS -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <!-- jQuery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">alert()</script>
+    <!-- Bootstrap JS -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+<style>
+.flip-card {
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  perspective: 1000px;
+}
+.flip-card-inner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+}
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.flip-card-front {
+  background-color: #white;
+  color: black;
+}
+.flip-card-back {
+  background-color: #2980b9;
+  color: white;
+  transform: rotateY(180deg);
+}
+.user {
+  background-color: #2980b9;
+  color: white;
+}
+</style>
+<!-- Add icon library -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<div class="flip-card">
+  <div class="flip-card-inner">
+    <div class="flip-card-front">
+      <div class="card">
+      <br>
+        <p><img src="https://placekitten.com/200/300" alt="John"  class="mx-auto d-block" style="max-width:80px; border-radius: var(--radius-xxl);"></p>
+        <h1>Christof Kaller</h1>
+        <p>Leader & Architect</p>
+        <p class="title">KI enthusiast</p>
+        <p>Issum, NRW</p>
+      </div>
+    </div>
+    <div class="flip-card-back" ><br>
+      <h1  style="color:white">Christof Kaller</h1>
+      <figure>
+        <!-- Bootstrap 5 blockquote class used -->
+        <blockquote class="blockquote">
+            <p style="color:white">
+                Die schönste Tradition ist<br> die Veränderung.
+            </p>
+        </blockquote>
+        <figcaption class="blockquote-footer"  style="color:white">
+            - Homer Simpson & J.W. Goethe
+        </figcaption>
+      </figure>
+      <p></p>
+      <p> </p>
+      <a href="https://github.com/Ckal"><i class="fa fa-git"></i></a>
+      <a href="https://www.xing.com/profile/Christof_Kaller/web_profiles"><i class="fa fa-xing"></i></a>
+      <a href="https://huggingface.co/Chris4K"><i class="fa fa-smile"></i></a>
+      <a href="https://twitter.com/zX14_7"><i class="fa fa-twitter"></i></a>
+      <a href="https://www.linkedin.com/in/christof-kaller-6b043733/"><i class="fa fa-linkedin"></i></a>
+      <a href="https://www.facebook.com/christof.kaller?locale=de_DE"><i class="fa fa-facebook"></i></a>
+      <p><button>Contact</button></p>
+    </div>
+  </div>
+</div>
+"""
+left_column_html_2 = """
+  <style>
+ .carousel-control-next
+ /*, .carousel-indicators  ,.carousel-control-prev */ {
+    filter: invert(100%);
+}
+    #skills {
+      max-width: 960px;
+      margin: 0 auto;
+      position: relative;
+      padding: 0 20px;
+    }
+    #skills h1 {
+      margin: 0;
+      line-height: 50px;
+      letter-spacing: 5px;
+      font-weight: 600;
+      font-size: 2.1em;
+      color: white;
+    }
+    #skills .border {
+      display: block;
+      height: 5px;
+      margin-bottom: 40px;
+      width: 200px;
+      background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
+    }
+    .progressBar {
+      margin-bottom: 26px;
+      margin-bottom: 1.66em;
+    }
+    .progressBar h4 {
+      font-size: 17px;
+      color: #868b8e;
+      text-transform: none;
+      margin-bottom: 7px;
+      margin-bottom: .33em;
+    }
+    .progressBarContainer {
+      width: 100%;
+      height: 9px;
+      background: #E1E1E1;
+      overflow: hidden;
+    }
+    .progressBarValue {
+      height: 9px;
+      float: left;
+      background: #e55d87; /* Old browsers */
+      background: -moz-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
+      background: -webkit-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
+      background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
+    }
+    .value-00 {
+      width: 0;
+    }
+    .value-10 {
+      width: 10%;
+    }
+    .value-20 {
+      width: 20%;
+    }
+    .value-30 {
+      width: 30%;
+    }
+    .value-40 {
+      width: 40%;
+    }
+    .value-50 {
+      width: 50%;
+    }
+    .value-60 {
+      width: 60%;
+    }
+    .value-65 {
+      width: 65%;
+    }
+    .value-70 {
+      width: 70%;
+    }
+    .value-80 {
+      width: 80%;
+    }
+    .value-85 {
+      width: 85%;
+    }
+    .value-90 {
+      width: 90%;
+    }
+    .value-95 {
+      width: 95%;
+    }
+    .value-100 {
+      width: 100%;
+    }
+  </style>
+<div class="container">
+  <!-- Skills Carousel -->
+  <div class="row">
+    <div class="col">
+      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+        <div class="carousel-inner">
+          <!-- First Carousel Item - Technical Skills -->
+          <div class="carousel-item ">
+            <h1>Technical Skills</h1>
+            <div class="progressBar">
+              <h4>HTML5/CSS/JavaScript</h4>
+              <div class="progressBarContainer">
+                <div class="progressBarValue value-90"></div>
+              </div>
+            </div>
+            <div class="progressBar">
+              <h4>Java</h4>
+              <div class="progressBarContainer">
+                <div class="progressBarValue value-80"></div>
+              </div>
+            </div>
+            <div class="progressBar">
+              <h4>Python</h4>
+              <div class="progressBarContainer">
+                <div class="progressBarValue value-65"></div>
+              </div>
+            </div>
+            <!-- Add more technical skills here -->
+          </div>
+          <div class="carousel-item">
+            <h1>Project Management Skills</h1>
+            <div class="progressBar">
+              <h4>Agile | Scrum | Kanban</h4>
+              <div class="progressBarContainer">
+                <div class="progressBarValue value-95"></div>
+              </div>
+            </div>
+            <div class="progressBar">
+              <h4>Pro3</h4>
+              <div class="progressBarContainer">
+                <div class="progressBarValue value-70"></div>
+              </div>
+            </div>
+            <div class="progressBar">
+              <h4>MVP | MoSCoW</h4>
+              <div class="progressBarContainer">
+                <div class="progressBarValue value-80"></div>
+              </div>
+            </div>
+          </div>
+        <div class="carousel-item active">
+          <h1>Management Skills</h1>
+          <div class="progressBar">
+            <h4>Leadership</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-90"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Communication</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-95"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Strategic Planning</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-90"></div>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item ">
+          <h1>Toolz Skillz</h1>
+          <div class="progressBar">
+            <h4>Office</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-90"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Confluence/Jira</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-90"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Many, many others</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-80"></div>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item ">
+          <h1>Admin Skills</h1>
+          <div class="progressBar">
+            <h4>Jenkins</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-70"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>GCP | Oracle | Azure</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-60"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>GIT | Bitbucket</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-65"></div>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item ">
+          <h1>Operating Skills</h1>
+          <div class="progressBar">
+            <h4>Windows</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-90"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Linux</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-70"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Mac</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-60"></div>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item ">
+          <h1>Design Skills</h1>
+          <div class="progressBar">
+            <h4>Figma</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-40"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Bootstrap UI</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-70"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Sketch</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-20"></div>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item ">
+          <h1>Hobbies</h1>
+          <div class="progressBar">
+            <h4>Meine Familie</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-100"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Sauna | TangSoDo | joggen</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-70"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>KI | AI</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-95"></div>
+            </div>
+          </div>
+        </div>
+        <div class="carousel-item ">
+          <h1>Language Skills</h1>
+          <div class="progressBar">
+            <h4>Deutsch</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-100"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>English</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-85"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>Dutch UI</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-85"></div>
+            </div>
+          </div>
+          <div class="progressBar">
+            <h4>French</h4>
+            <div class="progressBarContainer">
+              <div class="progressBarValue value-40"></div>
+            </div>
+          </div>
+        </div>
+        </div>
+        <!-- Carousel Controls -->
+        <a style="color:black" class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="false"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+        <a  style="color:black" class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="false"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+"""
+modal_html = """
+<!-- Button to trigger modal -->
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+  Launch demo modal
+</button>
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+"""
+gr.HTML(header_html)
+chat_app = gr.Blocks(js=js_head, css=".user {  background-color: #2980b9;   color: white;} :root {--button-primary-text-color:  white !important; --button-primary-background-fill-hover: green !important; --button-primary-background-fill: #2980b9 !important;}   .message {  background-color: #2980b9;   color: white;}  ")
+with chat_app:
+  gr.HTML(html_head)
+  gr.HTML(header_html)
+  with gr.Row():
+      with gr.Column(scale=1):
+              gr.HTML(left_column_html)
+            #with gr.Row( ):
+              gr.HTML(left_column_html_2)
+      with gr.Column(scale=5):
+          chat_interface = gr.ChatInterface(fn=get_response, title=None, description=None)
+  #gr.HTML(modal_html)
+# Create the Gradio Interface
+# Launch the Gradio Interface
+chat_app.launch(debug=True, share=True)