app.py

import gradio as gr
import rpy2.robjects as robj
from rpy2.robjects import default_converter
from rpy2.robjects.conversion import localconverter

# define R functions globally
robj.r("""
    add <- function(x,y) { return(x + y) }
    multiply <- function(x,y) { return(x * y) }
    sub <- function(x,y) { return(x - y) }
    div <- function(x,y) { return(x / y) }
  """)

def arithmetic(num1, num2, operation):
  
  with localconverter(default_converter):

    if operation == "Add":
      res = robj.r(f"add({num1}, {num2})")
    elif operation == "Multiply":
      res = robj.r(f"multiply({num1}, {num2})")
    elif operation == "Subtract":
      res = robj.r(f"sub({num1}, {num2})")
    elif operation == "Divide":
      res = robj.r(f"div({num1}, {num2})")

    return res[0]

custom_css = """
    /* Define color variables for the dark theme */
    :root {
      --background-color: #121212;
      --surface-color: #1e1e1e;
      --primary-color: #3a6ea5;
      --accent-color: #6d9eeb;
      --text-primary: #ffffff;
      --text-secondary: #b0b0b0;
      --border-color: #2c2c2c;
      --input-background: #2a2a2a;
      --button-gradient-start: #4568dc;
      --button-gradient-end: #0f4c81;
      --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    /* Global styles for the Gradio app */
    body {
      background-color: var(--background-color) !important;
      color: var(--text-primary) !important;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }
    
    /* Override Gradio's container styles */
    .gradio-container {
      max-width: 800px !important;
      margin: 0 auto !important;
      background-color: var(--background-color) !important;
    }
    
    /* Header styling */
    h1, h2, h3, h4, h5, h6 {
      color: var(--text-primary) !important;
      font-weight: 600 !important;
    }
    
    /* Make the main title stand out */
    h1 strong {
      background: linear-gradient(135deg, #4568dc, #6d9eeb);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    /* Style the blocks and rows */
    .block, .gr-box, .gr-form, .gr-panel {
      background-color: var(--surface-color) !important;
      border-radius: 8px !important;
      border: 1px solid var(--border-color) !important;
      box-shadow: var(--box-shadow) !important;
      padding: 16px !important;
      margin-bottom: 20px !important;
    }
    
    /* Style labels */
    label, .gr-label {
      color: var(--text-primary) !important;
      font-weight: 500 !important;
      margin-bottom: 8px !important;
    }
    
    /* Style number inputs */
    input[type="number"], .gr-text-input, .gr-input {
      background-color: var(--input-background) !important;
      color: var(--text-primary) !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 6px !important;
      padding: 12px 16px !important;
      font-size: 16px !important;
      transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    input[type="number"]:focus, .gr-text-input:focus, .gr-input:focus {
      border-color: var(--accent-color) !important;
      box-shadow: 0 0 0 2px rgba(109, 158, 235, 0.2) !important;
      outline: none !important;
    }
    
    /* Style radio buttons */
    .gr-radio-group label {
      color: var(--text-secondary) !important;
    }
    
    .gr-radio {
      accent-color: var(--accent-color) !important;
    }
    
    .gr-checkbox-label, .gr-radio-label {
      color: var(--text-secondary) !important;
    }
    
    /* Override radio button containers */
    .gr-radio-group, .gr-form {
      background-color: var(--surface-color) !important;
      padding: 12px !important;
      border-radius: 8px !important;
      border: 1px solid var(--border-color) !important;
    }
    
    /* Style button with gradient */
    button, .gr-button {
      background: linear-gradient(135deg, var(--button-gradient-start), var(--button-gradient-end)) !important;
      color: white !important;
      border: none !important;
      padding: 12px 24px !important;
      border-radius: 6px !important;
      cursor: pointer !important;
      font-weight: 600 !important;
      letter-spacing: 0.5px !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
      text-transform: uppercase !important;
      font-size: 14px !important;
      width: auto !important;
      display: inline-block !important;
    }
    
    button:hover, .gr-button:hover {
      background: linear-gradient(135deg, #5273e3, #1a5fa0) !important;
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3) !important;
      transform: translateY(-1px) !important;
    }
    
    button:active, .gr-button:active {
      transform: translateY(1px) !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Result section styling */
    .gr-output-box {
      background-color: var(--surface-color) !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 8px !important;
      padding: 16px !important;
    }
    
    /* Result number styling */
    .gr-number-output {
      font-size: 24px !important;
      font-weight: 700 !important;
      color: var(--accent-color) !important;
      text-align: center !important;
    }
    
    /* For the result header */
    h3 strong {
      color: var(--accent-color) !important;
    }
    
    /* Add a subtle border to all rows */
    .gr-row {
      margin-bottom: 20px !important;
    }
    
    /* Remove footer */
    footer {
      display: none !important;
    }
    
    /* Fix any dark text on dark background issues */
    .dark {
      color: var(--text-primary) !important;
    }
    
    /* Additional spacing for the operation radio buttons */
    #operation {
      margin-top: 10px !important;
      margin-bottom: 20px !important;
    }
    
    /* Add a subtle gradient background to the app container */
    .gradio-app {
      background: linear-gradient(160deg, #121212 0%, #1a1f2c 100%) !important;
      min-height: 100vh !important;
    }
    
    /* Ensure number inputs don't have spinner arrows in Firefox */
    input[type=number] {
      -moz-appearance: textfield !important;
    }
    
    /* Remove spinner arrows from number inputs in other browsers */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0 !important;
    }
    
    /* Make the result stand out more */
    #result {
      font-size: 28px !important;
      padding: 16px !important;
      text-align: center !important;
      background-color: rgba(58, 110, 165, 0.1) !important;
      border-radius: 8px !important;
      margin-top: 10px !important;
    }
"""
with gr.Blocks(
    title="R-Powered Calculator",
    theme=gr.themes.Base(),
    css = custom_css
) as app:
  gr.HTML(
    """
    <h1 style='text-align: center'>
      <strong>R-Powered Calculator</strong>
    </h1>
    """
    )
  with gr.Row():
    num1 = gr.Number(label="Number 1")
    num2 = gr.Number(label="Number 2")
  with gr.Column():
    operation = gr.Radio(choices=["Add", "Multiply", "Subtract", "Divide"],
                         value="Add", 
                         label="Choose Arithmetic Operation",
                         min_width=100,
                         scale=0.3)
  with gr.Row():
    submit = gr.Button("Run Operation")
  with gr.Column():
    gr.HTML(
    """
    <h3 style='text-align: center'>
      <strong>Arithmetic Operation Result</strong>
    </h3>
    """
    )
    result = gr.Number()

  submit.click(arithmetic, inputs=[num1, num2, operation], outputs=[result])

app.launch(server_name="0.0.0.0", server_port=7860)