Hello,

Thank you for providing the card feature!

When using multiple cards, how can I get click results for each card?
For instance, with the following code:

hasClicked1 = card(
    title="111",
    text="Some description",
    image="http://placekitten.com/200/300",
    key="111",
    on_click=lambda: print("111"),
)
hasClicked2 = card(
    title="222",
    text="Some description",
    image="http://placekitten.com/200/300",
    key="222",
    on_click=lambda: print("222"),
)
print(f"{hasClicked1} {hasClicked2}")

When 111 is clicked, the result is:

True False  # print

And click 222, the result is:

True True  # print ...?

Since I only clicked on the "222" card,
I hoped that "False True" would come out, but it didn't work as expected.

How can i fix it?

Thank you in advance for your response!

Hi, how to use a file located locally in the project as a image in the card.

Can card add a settings: use_column_width=True ?
If this can be added, it will be more useful ！

Hi authors,

I'm using your package but cannot change any local image instead of your's example. Specifically, I have tried read some type of image such as .jpg and .png by using PIL.Image, but then it shows an error of cannot serialize as bellow

MarshallComponentException: ('Could not convert component args to JSON', TypeError('Object of type PngImageFile is not JSON serializable'))

How can I fix this

• Make the button redirect to the api route
• Check the client id
• Check the redirect uri
• Check the response type
• Check the scope
• Check and understand the state

I think having the ability to call a function when clicked would be a great feature. This would allow you to use the streamlit-extras switch page component for example when used in a function. Could add this feature as optional and if the URL argument is None then it would resort to the function call if present.

The padding around the outside of the card is excessive. Can we make this a part of the function kwargs?

The documentation says that the image parameter is optional, but if I don't pass it, I get warning messages:

2024-01-03 21:56:32.558 ComponentRequestHandler: GET /Users/preining/.pyenv/versions/3.10.13/envs/ffe-eval-dash2/lib/python3.10/site-packages/streamlit_card/frontend/build/null read error
Traceback (most recent call last):
  File "/Users/preining/.pyenv/versions/3.10.13/envs/ffe-eval-dash2/lib/python3.10/site-packages/streamlit/web/server/component_request_handler.py", line 55, in get
    with open(abspath, "rb") as file:
FileNotFoundError: [Errno 2] No such file or directory: '/Users/preining/.pyenv/versions/3.10.13/envs/ffe-eval-dash2/lib/python3.10/site-packages/streamlit_card/frontend/build/null'

In fact, what I would like to see is that one can just give a color for the background, and no image is needed.

Is this possible?

Thanks for providing this widget!

The package documentation says the "title" is also CSS editable but when I try to edit, nothing happens.

The following example works for "text" but updates all the text in the card.

from streamlit_card import card

res = card(
    title="Streamlit Card",
    text="This is a test card",
    image="https://placekitten.com/500/500",
    styles={
        "card": {
            "width": "500px",
            "height": "500px",
            "border-radius": "60px",
            "box-shadow": "0 0 10px rgba(0,0,0,0.5)",
            
        },
        "text" : {
            "color" : "red"
        }
    }
)

When I try to update "text" to title, the font color is white and nothing changes.

from streamlit_card import card

res = card(
    title="Streamlit Card",
    text="This is a test card",
    image="https://placekitten.com/500/500",
    styles={
        "card": {
            "width": "500px",
            "height": "500px",
            "border-radius": "60px",
            "box-shadow": "0 0 10px rgba(0,0,0,0.5)",
            
        },
        "title" : {
            "color" : "red"
        }
    }
)

I'm using streamlit-card==0.0.61 and Python 3.9.13.

Any ideas why?

Hey @gamcoh ,

can you update your package to make it compatible with Python Version > 3.7.8?

Best regards
Chris

Hi @gamcoh,

Thanks for making this package I like it a lot.

I ran into an issue with using the on_click feature of the card.

from streamlit_card import card

import base64

with open('transparent.png', "rb") as f:
    data = f.read()
    encoded = base64.b64encode(data)
data = "data:image/png;base64," + encoded.decode("utf-8")

from streamlit_card import card

hasClicked = card(
  title="Button 1",
  text="Some description",
  image=data,
  on_click=lambda: print('hi'),
  key='first'
)

hasClicked2 = card(
  title="Button 2",
  text="Some description",
  image=data,
  on_click=lambda: print('hi again'),
  key='second'
)

Here is a quick example that reproduces the issue I am having.

When you click on the card that is titled "Button 1" it will print "hi".

Afterwards if you then click on the card titled "Button 2" instead of expected output to be "hi again" it will instead print "hi" then "hi again".

I believe it has something to do with the __init__.py file checking

if clicked:
    on_click()

Which after clicking on a card it is set to true, but also stays true when pressing another card resulting in both on_clicks to execute.

Thanks again for making this super useful just struggling with figuring out how exactly the on_click portion works.

Trying to access the hover property of the card to show the URL that it'd would redirect to. Is that possible in the styles dict itself?

what key argument does it take and more about it please help me out

How can I modify size of the card?

While the distribution itself contains the license, it's not part of the package metadata.

I have 2 questions about customization.

1. How to make many card in one line (like columns), for example 3?
2. How to change card location? To left, right, etc.

Issue:

When you click the card on, the varible will turn true. However it remains true even after a re run of the app.

Scenario:

I have 2 cards in my app. I have an onclick function that prints the name of the card when clicked. When I click the first card I return the title 'Card 1'. The app then re runs as all streamlit apps do. After the rerun I click the second card and the app prints 'Card 1' and 'Card 2' because in the statefulness of the cards they are both considered true.

Solution.

The statefulness of the cards gets reset to false on app re runs.

Example:

        s1 = card(
                        title=1,
                        text="Card 1",
                        image="http://placekitten.com/200/300",
                        on_click=lambda: print("s1!"),
                        key = 's1')
        
        s2 = card(
                        title=2,
                        text="Card 2",
                        image="http://placekitten.com/200/300",
                        on_click=lambda: print("s2!"),
                        key = 's2')

Thank you for designing this package. It has been very helpful to me. But I still want to implement a new requirement:Implement local image loading

When adjusting the window size of my streamlit app that uses st-card. I am running into an issue where the cards will start to overlap each other. Is there a work around for this?

Thanks st-card has been super useful.

TypeError: card() got an unexpected keyword argument 'on_click'
TypeError: card() got an unexpected keyword argument 'styles'

Hi, both errors found with version 0.0.61.

• [front] Email, full name, pass, pass confirmation, sex
• [api] check if the email already exists
  • [front] redirect to login with notification/alert
• [api] check if the form data are correct
• [api] log in the attempt even if the info are not correct
  • [db] create a new database
• [api] confirm email address by sending a code
  • use a email service

I have multiple cards, roughly creating by -

for my_card in enumerate(my_cards):
     card(**my_card)

Now I want to add a functionality that when I click them it writes down something, let's say the title, e.g st.write(my_card['title'])

When adding something like -

for my_card in enumerate(my_cards):
     card(**my_card, on_click=lambda: st.write(my_card))

It writes it for all the cards that were previously clicked. Is there a way to disable previous clicks / identify the last clicked card? or any other option that will allow me to control the behavior?

hi, i got this error mesage when using the package

TypeError: 'NoneType' object is not callable
Traceback:
File "/usr/local/lib/python3.10/site-packages/streamlit/runtime/scriptrunner/script_runner.py", line 534, in _run_script
exec(code, module.dict)
File "/app/app.py", line 19, in
hasClicked = card(
File "/usr/local/lib/python3.10/site-packages/streamlit_card/init.py", line 54, in card
on_click()

my nginx.conf

server {
    listen       8000;
    server_name  localhost;

   location = /hsk {
         proxy_pass http://127.0.0.1:8501;
    }

    location ^~ /static {
        proxy_pass http://127.0.0.1:8501/static/;
    }

    location = /_stcore/health {
        proxy_pass http://127.0.0.1:8501/_stcore/health;
    }

  location = /_stcore/host-config {
        proxy_pass http://127.0.0.1:8501/_stcore/host-config;
    }

    location = /hsk/_stcore/health {
        proxy_pass http://127.0.0.1:8501/_stcore/health;
    }

    location = /hsk/_stcore/host-config {
        proxy_pass http://127.0.0.1:8501/_stcore/host-config;
    }

    location = /_stcore/allowed-message-origins {
        proxy_pass http://127.0.0.1:8501/_stcore/allowed-message-origins;
    }

    location = /hsk/_stcore/stream {
        proxy_pass http://127.0.0.1:8501/_stcore/stream;
        proxy_http_version 1.1;
        proxy_redirect off;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;
    }

add_header Content-Security-Policy "default-src 'self' https: data: 'unsafe-inline';" always;

@gamcoh pls

I need to customize font size, font family and multi line description. As well as the card width and height.

Hi,

it seems like the frontend build folder is missing when installing with pip. Running a streamlit app with card components throws this error:

FileNotFoundError: [Errno 2] No such file or directory: ...\\.conda\\envs\\...\\Lib\\site-packages\\streamlit_card\\frontend\\build\\null'
ComponentRequestHandler: GET ...\.conda\envs\...\Lib\site-packages\streamlit_card\frontend\build\null read error

I once had a similar issue with this streamlit component (issue).