Spaces:
Sleeping
Sleeping
| import os | |
| ##################################### | |
| ## | |
| ##################################### | |
| from transformers import AutoModelForCausalLM, AutoTokenizer, BitsAndBytesConfig | |
| from langchain.llms import HuggingFaceHub | |
| def load_model(): | |
| model = HuggingFaceHub( | |
| repo_id="mistralai/Mixtral-8x7B-Instruct-v0.1", | |
| model_kwargs={"max_length": 1048, "temperature":0.2, "max_new_tokens":512, "top_p":0.95, "repetition_penalty":1.0}, | |
| ) | |
| return model | |
| ################################################## | |
| ## vs chat | |
| ################################################## | |
| import torch | |
| from transformers import AutoModelForCausalLM, AutoTokenizer, BitsAndBytesConfig, pipeline | |
| from langchain_core.messages import AIMessage, HumanMessage | |
| from langchain_community.document_loaders import WebBaseLoader | |
| from langchain.text_splitter import RecursiveCharacterTextSplitter | |
| from langchain_community.vectorstores import Chroma | |
| from langchain.embeddings import HuggingFaceBgeEmbeddings | |
| from langchain.vectorstores.faiss import FAISS | |
| from dotenv import load_dotenv | |
| from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder | |
| from langchain.chains import create_history_aware_retriever, create_retrieval_chain | |
| from langchain.chains.combine_documents import create_stuff_documents_chain | |
| load_dotenv() | |
| from langchain_community.document_loaders import TextLoader | |
| from langchain_experimental.text_splitter import SemanticChunker | |
| ##################### | |
| #from langchain import RecursiveCharacterTextSplitter | |
| from langchain_core.documents import BaseDocumentTransformer, Document | |
| class QQQSplitter(RecursiveCharacterTextSplitter): | |
| def __init__(self): | |
| super().__init__() | |
| def split(self,text): | |
| """ | |
| Splits the given text whenever there is a "qqq" sequence. | |
| """ | |
| documents = [] | |
| for doc in documents: | |
| for char in doc.page_content: | |
| if char == "q": | |
| if len(current_part) > 0 and current_part[-1] == "q": | |
| # Found a "qqq" sequence, split! | |
| parts.append(current_part[:-1]) | |
| current_part = "" | |
| else: | |
| current_part += char | |
| else: | |
| current_part += char | |
| parts.append(current_part) | |
| print("cp " +current_part) | |
| new_doc = Document(page_content=current_part, metadata=doc.metadata) | |
| documents.append(new_doc) | |
| return documents | |
| ############################## | |
| def load_txt(path="./a.cv.ckaller.2024.txt"): | |
| loader = TextLoader(path) | |
| document = loader.load() | |
| #### | |
| from langchain_experimental.text_splitter import SemanticChunker | |
| with open(path) as f: | |
| state_of_the_union = f.read() | |
| ###### | |
| # split the document into chunks | |
| #''' __text_splitter = QQQSplitter( | |
| # chunk_size=1500, | |
| # chunk_overlap=250, | |
| # length_function=len, | |
| # is_separator_regex=False, | |
| # ) | |
| # __document_chunks = __text_splitter.split(document) | |
| # ''' | |
| ####### | |
| ''' | |
| FAISS | |
| A FAISS vector store containing the embeddings of the text chunks. | |
| ''' | |
| model = "BAAI/bge-base-en-v1.5" | |
| encode_kwargs = { | |
| "normalize_embeddings": True | |
| } # set True to compute cosine similarity | |
| ##### | |
| embeddings = HuggingFaceBgeEmbeddings( | |
| model_name=model, encode_kwargs=encode_kwargs, model_kwargs={"device": "cpu"} | |
| ) | |
| ##### | |
| text_splitter = SemanticChunker(HuggingFaceBgeEmbeddings()) | |
| document_chunks = text_splitter.create_documents([state_of_the_union]) | |
| print("----------------------------------------------------") | |
| print(document_chunks[0].page_content) | |
| print("----------------------------------------------------") | |
| print(document_chunks[1].page_content) | |
| print("----------------------------------------------------") | |
| print(document_chunks[2].page_content) | |
| print("----------------------------------------------------") | |
| # load from disk | |
| vector_store = Chroma(persist_directory="./chroma_db", embedding_function=embeddings) | |
| #vectorstore = FAISS.from_texts(texts=text_chunks, embedding=embeddings) | |
| vector_store = Chroma.from_documents(document_chunks, embeddings, persist_directory="./chroma_db") | |
| ####### | |
| # create a vectorstore from the chunks | |
| return vector_store | |
| def get_vectorstore_from_url(url="https://huggingface.co/Chris4K"): | |
| # get the text in document form | |
| loader = WebBaseLoader(url) | |
| document = loader.load() | |
| # split the document into chunks | |
| text_splitter = RecursiveCharacterTextSplitter( chunk_size=1500, | |
| chunk_overlap=250, | |
| length_function=len, | |
| is_separator_regex=False) | |
| document_chunks = text_splitter.split_documents(document) | |
| ####### | |
| ''' | |
| FAISS | |
| A FAISS vector store containing the embeddings of the text chunks. | |
| ''' | |
| model = "BAAI/bge-base-en-v1.5" | |
| encode_kwargs = { | |
| "normalize_embeddings": True | |
| } # set True to compute cosine similarity | |
| embeddings = HuggingFaceBgeEmbeddings( | |
| model_name=model, encode_kwargs=encode_kwargs, model_kwargs={"device": "cpu"} | |
| ) | |
| # load from disk | |
| vector_store = Chroma(persist_directory="./chroma_db", embedding_function=embeddings) | |
| #vectorstore = FAISS.from_texts(texts=text_chunks, embedding=embeddings) | |
| vector_store = Chroma.from_documents(document_chunks, embeddings, persist_directory="./chroma_db") | |
| ####### | |
| # create a vectorstore from the chunks | |
| return vector_store | |
| def get_context_retriever_chain(vector_store): | |
| llm = load_model( ) | |
| retriever = vector_store.as_retriever() | |
| prompt = ChatPromptTemplate.from_messages([ | |
| MessagesPlaceholder(variable_name="chat_history"), | |
| ("user", "{input}"), | |
| ("user", "Given the above conversation, generate a search query to look up in order to get information relevant to the conversation") | |
| ]) | |
| retriever_chain = create_history_aware_retriever(llm, retriever, prompt) | |
| return retriever_chain | |
| def get_conversational_rag_chain(retriever_chain): | |
| llm = load_model( ) | |
| prompt = ChatPromptTemplate.from_messages([ | |
| ("system", "Du bist ein Assistenz Bot. Du bist Nina, eine erfahrene Mitarbeiterin in einer renommierten Firma, die sich auf die Vermittlung von Führungskräften spezialisiert hat. Dein Lieblingskunde, den du aufrichtig schätzt und bewunderst, ist Christof Kaller. Er verkörpert für dich die ideale Kombination aus fachlicher Kompetenz, charismatischer Führung und menschlicher Wärme. Christof Kaller ist jemand, den du gerne als Angestellten mit Personalverantwortung, als Leiter IT, Abteilungsleiter oder in ähnlichen Positionen vermitteln möchtest. Seine außergewöhnlichen Fähigkeiten, sein Engagement für Exzellenz und sein respektvoller Umgang mit anderen machen ihn zu einem herausragenden Kandidaten für anspruchsvolle Führungspositionen. Als Person strahlt Christof Kaller eine natürliche Autorität aus, die von seinem tiefen Verständnis für die Bedürfnisse seines Teams und seiner Fähigkeit, Menschen zu inspirieren, unterstützt wird. Er ist nicht nur ein versierter Fachmann in seinem Bereich, sondern auch ein einfühlsamer und motivierender Anführer, der das Beste aus seinen Mitarbeitern herausholt. In deiner Rolle als Susie ist es deine Leidenschaft, Talente wie Christof Kaller zu identifizieren und sie mit Unternehmen zusammenzubringen, die ihre Fähigkeiten und ihren Beitrag zu schätzen wissen. Du betrachtest es als Privileg, Menschen wie Christof auf ihrem Weg zu unterstützen und dazu beizutragen, dass sie ihre beruflichen Ziele erreichen und ihr volles Potenzial entfalten können. Du bist eine freundlicher Mitarbeiterin Namens Susie. Du möchtest Christof Kaller zu einer neuen, gut bezahlten Stelle mit Personalverantwortung verhelfen. Du beantwortest Fragen potentieller neuer Arbeitgeber basierend auf dem Context. Benutze nur den Inhalt des Context. Füge wenn möglich die Quelle hinzu. Antworte mit: Ich bin mir nicht sicher. Wenn die Antwort nicht aus dem Context hervorgeht. Antworte auf Deutsch. CONTEXT:\n\n{context}"), | |
| MessagesPlaceholder(variable_name="chat_history"), | |
| ("user", "{input}"), | |
| ]) | |
| stuff_documents_chain = create_stuff_documents_chain(llm,prompt) | |
| return create_retrieval_chain(retriever_chain, stuff_documents_chain) | |
| def get_response(user_input): | |
| retriever_chain = get_context_retriever_chain(st.session_state.vector_store) | |
| conversation_rag_chain = get_conversational_rag_chain(retriever_chain) | |
| response = conversation_rag_chain.invoke({ | |
| "chat_history": st.session_state.chat_history, | |
| "input": user_query | |
| }) | |
| return response | |
| ################### | |
| ################### | |
| import gradio as gr | |
| ##from langchain_core.runnables.base import ChatPromptValue | |
| #from torch import tensor | |
| # Create Gradio interface | |
| #vector_store = None # Set your vector store here | |
| chat_history = [] # Set your chat history here | |
| # Define your function here | |
| def get_response(user_input): | |
| # Define the prompt as a ChatPromptValue object | |
| #user_input = ChatPromptValue(user_input) | |
| # Convert the prompt to a tensor | |
| #input_ids = user_input.tensor | |
| #vs = get_vectorstore_from_url(user_url, all_domain) | |
| vs = get_vectorstore_from_url() | |
| # print("------ here 22 " ) | |
| chat_history =[] | |
| retriever_chain = get_context_retriever_chain(vs) | |
| conversation_rag_chain = get_conversational_rag_chain(retriever_chain) | |
| response = conversation_rag_chain.invoke({ | |
| "chat_history": chat_history, | |
| "input": user_input | |
| }) | |
| #print("get_response " +response) | |
| res = response['answer'] | |
| parts = res.split(" Assistant: ") | |
| last_part = parts[-1] | |
| return last_part | |
| def history_to_dialog_format(chat_history: list[str]): | |
| dialog = [] | |
| if len(chat_history) > 0: | |
| for idx, message in enumerate(chat_history[0]): | |
| role = "user" if idx % 2 == 0 else "assistant" | |
| dialog.append({ | |
| "role": role, | |
| "content": message, | |
| }) | |
| return dialog | |
| def get_response(message, history): | |
| dialog = history_to_dialog_format(history) | |
| dialog.append({"role": "user", "content": message}) | |
| print(dialog) | |
| # Define the prompt as a ChatPromptValue object | |
| #user_input = ChatPromptValue(user_input) | |
| # Convert the prompt to a tensor | |
| #input_ids = user_input.tensor | |
| #vs = get_vectorstore_from_url(user_url, all_domain) | |
| vs = get_vectorstore_from_url("https://huggingface.co/Chris4K") | |
| history =[] | |
| retriever_chain = get_context_retriever_chain(vs) | |
| conversation_rag_chain = get_conversational_rag_chain(retriever_chain) | |
| response = conversation_rag_chain.invoke({ | |
| "chat_history": history, | |
| "input": message + " Assistant: ", | |
| "chat_message": message + " Assistant: " | |
| }) | |
| #print("get_response " +response) | |
| res = response['answer'] | |
| parts = res.split(" Assistant: ") | |
| last_part = parts[-1] | |
| return last_part#[-1]['generation']['content'] | |
| ##### | |
| 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") | |
| ###### | |
| ######## | |
| import requests | |
| from bs4 import BeautifulSoup | |
| from urllib.parse import urlparse, urljoin | |
| def get_links_from_page(url, visited_urls, domain_links): | |
| if url in visited_urls: | |
| return | |
| if len(visited_urls) > 12: | |
| return | |
| visited_urls.add(url) | |
| print(url) | |
| response = requests.get(url) | |
| if response.status_code == 200: | |
| soup = BeautifulSoup(response.content, 'html.parser') | |
| base_url = urlparse(url).scheme + '://' + urlparse(url).netloc | |
| links = soup.find_all('a', href=True) | |
| for link in links: | |
| href = link.get('href') | |
| absolute_url = urljoin(base_url, href) | |
| parsed_url = urlparse(absolute_url) | |
| if parsed_url.netloc == urlparse(url).netloc: | |
| domain_links.add(absolute_url) | |
| get_links_from_page(absolute_url, visited_urls, domain_links) | |
| else: | |
| print(f"Failed to retrieve content from {url}. Status code: {response.status_code}") | |
| def get_all_links_from_domain(domain_url): | |
| visited_urls = set() | |
| domain_links = set() | |
| get_links_from_page(domain_url, visited_urls, domain_links) | |
| return domain_links | |
| # Example usage: | |
| '''domain_url = 'https://www.bofrost.de/' | |
| links = get_all_links_from_domain(domain_url) | |
| print("Links from the domain:", links) | |
| ######### | |
| ##Assuming visited_urls is a list of URLs | |
| for url in links: | |
| vs = get_vectorstore_from_url(url) | |
| ''' | |
| def simple(text:str): | |
| return text +" hhhmmm " | |
| import gradio as gr | |
| # Define your function | |
| # 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> | |
| <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">×</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) | |