Spaces:
				
			
			
	
			
			
		Running
		
			on 
			
			Zero
	
	
	
			
			
	
	
	
	
		
		
		Running
		
			on 
			
			Zero
	Commit 
							
							·
						
						19342c6
	
1
								Parent(s):
							
							5ce66fb
								
fix: example hover color, copy update for description
Browse files- src/app.css +15 -6
- src/app.py +4 -7
    	
        src/app.css
    CHANGED
    
    | @@ -40,12 +40,6 @@ textarea, .wrapper > label { | |
| 40 | 
             
                font-size: 36px;
         | 
| 41 | 
             
                font-weight: 600;
         | 
| 42 | 
             
            }
         | 
| 43 | 
            -
            /* Color the Granite icon in white for dark mode */
         | 
| 44 | 
            -
            @media (prefers-color-scheme: dark) {
         | 
| 45 | 
            -
                .gr_title img {
         | 
| 46 | 
            -
                    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);
         | 
| 47 | 
            -
                }
         | 
| 48 | 
            -
            }
         | 
| 49 | 
             
            /* Only one form on the page, within the Accordion component */
         | 
| 50 | 
             
            .form {
         | 
| 51 | 
             
                flex-direction: row;
         | 
| @@ -55,6 +49,10 @@ textarea, .wrapper > label { | |
| 55 | 
             
                width: 50%;
         | 
| 56 | 
             
                margin: 0px;
         | 
| 57 | 
             
            }
         | 
|  | |
|  | |
|  | |
|  | |
| 58 | 
             
            /* Centre the example text within the example box */
         | 
| 59 | 
             
            .example-text-content {
         | 
| 60 | 
             
                margin-top: auto;
         | 
| @@ -64,3 +62,14 @@ textarea, .wrapper > label { | |
| 64 | 
             
            .tab-like-container  {
         | 
| 65 | 
             
                align-items: center;
         | 
| 66 | 
             
            }
         | 
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | 
|  | |
| 40 | 
             
                font-size: 36px;
         | 
| 41 | 
             
                font-weight: 600;
         | 
| 42 | 
             
            }
         | 
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
| 43 | 
             
            /* Only one form on the page, within the Accordion component */
         | 
| 44 | 
             
            .form {
         | 
| 45 | 
             
                flex-direction: row;
         | 
|  | |
| 49 | 
             
                width: 50%;
         | 
| 50 | 
             
                margin: 0px;
         | 
| 51 | 
             
            }
         | 
| 52 | 
            +
            /* Color the example background */
         | 
| 53 | 
            +
            .example:hover {
         | 
| 54 | 
            +
                background-color: #D0E2FF
         | 
| 55 | 
            +
            }
         | 
| 56 | 
             
            /* Centre the example text within the example box */
         | 
| 57 | 
             
            .example-text-content {
         | 
| 58 | 
             
                margin-top: auto;
         | 
|  | |
| 62 | 
             
            .tab-like-container  {
         | 
| 63 | 
             
                align-items: center;
         | 
| 64 | 
             
            }
         | 
| 65 | 
            +
            /* dark mode */
         | 
| 66 | 
            +
            @media (prefers-color-scheme: dark) {
         | 
| 67 | 
            +
                /* Color the Granite icon in white */
         | 
| 68 | 
            +
                .gr_title img {
         | 
| 69 | 
            +
                    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);
         | 
| 70 | 
            +
                }
         | 
| 71 | 
            +
                /* Color the example background */
         | 
| 72 | 
            +
                .example:hover {
         | 
| 73 | 
            +
                    background-color: #4589FF
         | 
| 74 | 
            +
                }
         | 
| 75 | 
            +
            }
         | 
    	
        src/app.py
    CHANGED
    
    | @@ -19,9 +19,8 @@ Today's Date: {today_date}. | |
| 19 | 
             
            You are Granite, developed by IBM. You are a helpful AI assistant"""
         | 
| 20 | 
             
            TITLE = "IBM Granite 3.1 8b Instruct"
         | 
| 21 | 
             
            DESCRIPTION = """
         | 
| 22 | 
            -
            <p>Granite 3.1 is  | 
| 23 | 
            -
             | 
| 24 | 
            -
            make mistakes.
         | 
| 25 | 
             
            <span class="gr_docs_link">
         | 
| 26 | 
             
            <a href="https://www.ibm.com/granite/docs/">View Documentation <i class="fa fa-external-link"></i></a>
         | 
| 27 | 
             
            </span>
         | 
| @@ -132,10 +131,8 @@ with gr.Blocks(fill_height=True, css_paths=css_file_path, head_paths=head_file_p | |
| 132 | 
             
                    examples=[
         | 
| 133 | 
             
                        ["Explain the concept of quantum computing to someone with no background in physics or computer science."],
         | 
| 134 | 
             
                        ["What is OpenShift?"],
         | 
| 135 | 
            -
                        [" | 
| 136 | 
            -
                        [
         | 
| 137 | 
            -
                            """Imagine you're a productivity expert. How can I develop effective habits to increase my productivity and efficiency? Provide me with specific strategies and actionable steps I can implement in my daily routine."""  # noqa: E501
         | 
| 138 | 
            -
                        ],
         | 
| 139 | 
             
                        [
         | 
| 140 | 
             
                            """Explain the following code in a concise manner:
         | 
| 141 |  | 
|  | |
| 19 | 
             
            You are Granite, developed by IBM. You are a helpful AI assistant"""
         | 
| 20 | 
             
            TITLE = "IBM Granite 3.1 8b Instruct"
         | 
| 21 | 
             
            DESCRIPTION = """
         | 
| 22 | 
            +
            <p>Granite 3.1 8b instruct is an open-source LLM supporting a 128k context window. Start with one of the sample prompts
         | 
| 23 | 
            +
            or enter your own. Keep in mind that AI can occasionally make mistakes.
         | 
|  | |
| 24 | 
             
            <span class="gr_docs_link">
         | 
| 25 | 
             
            <a href="https://www.ibm.com/granite/docs/">View Documentation <i class="fa fa-external-link"></i></a>
         | 
| 26 | 
             
            </span>
         | 
|  | |
| 131 | 
             
                    examples=[
         | 
| 132 | 
             
                        ["Explain the concept of quantum computing to someone with no background in physics or computer science."],
         | 
| 133 | 
             
                        ["What is OpenShift?"],
         | 
| 134 | 
            +
                        ["What's the importance of low latency inference?"],
         | 
| 135 | 
            +
                        ["Help me boost productivity habits."],
         | 
|  | |
|  | |
| 136 | 
             
                        [
         | 
| 137 | 
             
                            """Explain the following code in a concise manner:
         | 
| 138 |  | 

