<commit_before><template>
    <div id="gallery">
        <transition-group tag="div" class='slide-img' name="flip-list">
            <div v-for="(item, index ) in slides" :key="index" v-show="index===nowIndex">
                <img :src="item.src" alt="">
            </div>
        </transition-group>
    </div>
</template>

<script>
    export default {
        name: 'flickr',
        data() {
            return {
                slides: [],
                inv: 3000,  // 图片自动切换速度
                nowIndex: 0
            }
        },
        computed: {
            nextIndex () {
                if (this.nowIndex === this.slides.length - 1) {
                    return 0
                } else {
                    return this.nowIndex + 1
                }
            }
        },
        mounted() {
            this.updateFlickr();
            setInterval(this.updateFlickr, 60000)
        },
        methods: {
            updateFlickr() {
                let api = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=6c14f85120153781612e77b6c7a397a1&user_id=139294463%40N06&extras=url_l&per_page=500&format=json&nojsoncallback=1';
                let self = this;
                fetch(api).then(function(res){
                    return res.json();
                }).then(function(json){
                    let slides = [];
                    for(let i = 0; i < json.photos.photo.length; i ++) {
                        slides[i] = {
                            src: json.photos.photo[i].url_l
                        }
                    }
                    self.slides = slides;
                    console.log(self.slides)
                }).catch(function(error) { console.log(error); });
                this.runInv();
            },
            goto (index) {
                this.nowIndex = index
            },
            runInv () {
                this.invId = setInterval(() => {
                    this.goto(this.nextIndex)
                }, this.inv)
            }
        }
    }

</script>
<style>
    #gallery {
        width: 100%;
        height: 574px;
        position: fixed;
        left: 0;
        bottom: 0;
    }
    #gallery div {
        text-align: center;
    }
    #gallery img {
        max-height: 574px;
        object-fit:cover;
    }
    .flip-list-enter-active, .flip-list-leave-active {
        transition: all 1s;
    }
    flip-list-enter, .flip-list-leave-active {
        opacity: 0;
    }
</style><commit_msg>random images, use swipe component<commit_after><template>
    <div id="gallery">
        <swiper :options="swiperOption">
            <swiper-slide v-for="slide in swiperSlides">
                <img :src="slide.src">
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: 'flickr',
        data() {
            return {
                swiperOption: {
                    autoplay: 3500,
                    setWrapperSize :true,
                    pagination : '',
                    effect: 'fade',
                    speed: 500,
                    mousewheelControl : true,
                    observeParents:true,
                },
                swiperSlides: [1, 2, 3, 4, 5]
            }
        },
        mounted() {
            this.updateFlickr();
            //setInterval(this.updateFlickr, 3600000);
            setInterval(() => {
                //console.log('simulate async data');
                let swiperSlides = this.swiperSlides;
                if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
            }, 3000)
        },
        methods: {
            updateFlickr() {
                let api = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=<KEY>' +
                    '&user_id=139294463%40N06&extras=url_l&per_page=500&format=json&nojsoncallback=1';
                let self = this;
                fetch(api).then(function(res){
                    return res.json();
                }).then(function(json){
                    let slides = [];
                    for(let i = 0; i < json.photos.photo.length; i ++) {
                        let j = Math.floor(Math.random() * json.photos.photo.length);
                        slides[i] = {
                            src: json.photos.photo[j].url_l
                        };
                        json.photos.photo.splice(j, 1);
                    }
                    self.swiperSlides = slides;
                    //console.log(self.swiperSlides)
                }).catch(function(error) { console.log(error); });
            }
        }
    }

</script>
<style>
    #gallery {
        width: 100%;
        height: 574px;
        position: fixed;
        left: 0;
        bottom: 0;
    }
    .swiper-slide {
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: #000;
    }
    #gallery img {
        max-height: 574px;
    }
</style>
{'fraction_non_alphanumeric': 0.12715258309971966, 'fraction_numerical': 0.02683219863836604, 'mean_word_length': 1.1755226480836236, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 32, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1328565', 'n_tokens_mistral': 1581, 'n_tokens_neox': 1397, 'n_words': 243}